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

2019-10-22 21:14:37 +08:00
 Danswerme

类似的问题： 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 解决吗？

3332 次点击
所在节点    程序员
14 条回复
SP00F
2019-10-22 21:21:50 +08:00
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
2019-10-22 21:22:04 +08:00
https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

原来是故意这么干的.
Danswerme
2019-10-22 21:31:44 +08:00
@SP00F 我试了一下，main 一旦出现之后 banner 的 flex: 1 就失效了，直接被挤没了。
SP00F
2019-10-22 21:35:52 +08:00
@Danswerme #3

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

你如果滚动的话，父级用 relative 子级 banner 用 absolute。在区域里是可以滚动的
crysislinux
2019-10-22 21:37:03 +08:00
我来看看有解决办法没，要支持移动端我都用 100%。
Danswerme
2019-10-22 21:41:45 +08:00
@SP00F 但是如果 banner 用了绝对定位，下面的 main 不也得来个定位或者 margin 之类的？这样一来又涉及到获取屏幕高度了..
Danswerme
2019-10-22 21:41:55 +08:00
@crysislinux 麻烦大佬了
godoway
2019-10-22 23:28:36 +08:00
网站用的 https 并且证书是安全的情况，chrome 的 toolbar 随着网页滚动隐藏后你就会发现多出的那截东西就没了。
love
2019-10-22 23:42:29 +08:00
印象中 position fixed 可破
Danswerme
2019-10-22 23:44:39 +08:00
@godoway https://sariay.github.io/

你看看这个博客，https 证书有效的。
banner 也是用了 100vh，到了安卓 chrome 就不能刚好占满全屏了。
Danswerme
2019-10-22 23:45:28 +08:00
@love 你是说 banner 使用 fixed ？ banner fixed 之后 main 部分怎么处理呢？
godoway
2019-10-23 00:31:26 +08:00
@Danswerme
<meta name="mobile-web-app-capable" content="yes">
不知道这个有没有效
felixin
2019-10-23 01:13:07 +08:00
如果是 react 可以用 react-div-100vh
molvqingtai
2019-10-23 02:08:31 +08:00
我是通过 js 动态设置为 innerHeight

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/611882

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX