类似的问题: 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 解决吗?
1
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; 可以尝试一下。 |
2
Danswerme OP |
3
Danswerme OP @SP00F 我试了一下,main 一旦出现之后 banner 的 flex: 1 就失效了,直接被挤没了。
|
4
SP00F 2019-10-22 21:35:52 +08:00
|
5
crysislinux 2019-10-22 21:37:03 +08:00
我来看看有解决办法没,要支持移动端我都用 100%。
|
6
Danswerme OP @SP00F 但是如果 banner 用了绝对定位,下面的 main 不也得来个定位或者 margin 之类的?这样一来又涉及到获取屏幕高度了..
|
7
Danswerme OP @crysislinux 麻烦大佬了
|
8
godoway 2019-10-22 23:28:36 +08:00 via Android
网站用的 https 并且证书是安全的情况,chrome 的 toolbar 随着网页滚动隐藏后你就会发现多出的那截东西就没了。
|
9
love 2019-10-22 23:42:29 +08:00 via Android
印象中 position fixed 可破
|
10
Danswerme OP |
11
Danswerme OP @love 你是说 banner 使用 fixed ? banner fixed 之后 main 部分怎么处理呢?
|
12
godoway 2019-10-23 00:31:26 +08:00 via Android
|
13
felixin 2019-10-23 01:13:07 +08:00 via Android
如果是 react 可以用 react-div-100vh
|
14
molvqingtai 2019-10-23 02:08:31 +08:00 via Android
我是通过 js 动态设置为 innerHeight
|