使用 height: 100vh 时在安卓 Chrome 上会多出一截，这种情况不用 js 怎么解决？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2407 days ago, the information mentioned may be changed or developed.

类似的问题： https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile

代码大概是这样：

.banner {
    height: 100vh;
}

main {
    height: 6000px;
}

<body>
    <div class="banner"></div>
    <main></main>
</body>

安卓 Chrome 将地址栏也计算进了屏幕高度里，导致 banner 有一部分滚动到屏幕下方去了，并不能正好占满屏幕。

因为 banner 下面还有一个 main，所以没法用 100%高度了，请教大家这种情况能用 css 解决吗？

14 replies • 2019-10-23 02:08:31 +08:00

SP00F

Oct 22, 2019

html, body 100%
.wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; }
.banner { flex: 1; }
.main { height: 6000px; }

这样的话。。。需要让 wrapper 支持滚动，把 body 禁止滚动 overflow: hidden;
可以尝试一下。

Danswerme

Oct 22, 2019 via Android

https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

原来是故意这么干的.

Danswerme

Oct 22, 2019 via Android

@SP00F 我试了一下，main 一旦出现之后 banner 的 flex: 1 就失效了，直接被挤没了。

SP00F

Oct 22, 2019

@Danswerme #3

好像是 flex 会被挤掉。。根据当前可视正文区域显示的。。

你如果滚动的话，父级用 relative 子级 banner 用 absolute。在区域里是可以滚动的

crysislinux

Oct 22, 2019

我来看看有解决办法没，要支持移动端我都用 100%。

Danswerme

Oct 22, 2019 via Android

@SP00F 但是如果 banner 用了绝对定位，下面的 main 不也得来个定位或者 margin 之类的？这样一来又涉及到获取屏幕高度了..

Danswerme

Oct 22, 2019 via Android

@crysislinux 麻烦大佬了

godoway

Oct 22, 2019 via Android

网站用的 https 并且证书是安全的情况，chrome 的 toolbar 随着网页滚动隐藏后你就会发现多出的那截东西就没了。

love

Oct 22, 2019 via Android

印象中 position fixed 可破

Danswerme

Oct 22, 2019 via Android

@godoway https://sariay.github.io/

你看看这个博客，https 证书有效的。
banner 也是用了 100vh，到了安卓 chrome 就不能刚好占满全屏了。

Danswerme

Oct 22, 2019 via Android

@love 你是说 banner 使用 fixed ？ banner fixed 之后 main 部分怎么处理呢？

godoway

Oct 23, 2019 via Android

@Danswerme
<meta name="mobile-web-app-capable" content="yes">
不知道这个有没有效

felixin

Oct 23, 2019 via Android

如果是 react 可以用 react-div-100vh

molvqingtai

Oct 23, 2019 via Android

我是通过 js 动态设置为 innerHeight