这是我遇到的一个有趣的情况。
您正在使用 Android 版 Chrome，当您滚动正文时，地址栏会消失并隐藏。伟大的！
现在您想要向页面添加一个固定在底部的页脚。您执行以下操作：
html {
margin:0;
padding:0;
height:100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#contentWrap {
margin:0;
padding:0;
padding-bottom:4em;
min-height:calc(100% - 4em);
position:relative;
}
#footer {
margin:0;
padding:0;
height:4em;
width:100%;
position:absolute;
bottom:0;
background:#262626;
}
<html>
<body>
<div id="contentWrap">
<div id="footer">
</div>
</div>
</body>
</html>
这非常有效，无论内容大小或视口比例如何，页脚都将始终粘在页面底部。
然而！在移动设计上运行这个并在 Chrome Android 中进行测试，我发现将正文设置为明确的大小，它只会滚动“内容”，导致地址栏停留在周围。换句话说，溢出的内容只是设置为默认滚动。
注意到这一点，我尝试将其更改为最小高度，以便如果没有内容可用于填充它，它将始终是视口的大小，或者如果碰巧有很多行内容，则更改高度。
然而，这样做会导致 contentWrap 的高度基于内容而不是父元素，即。 。所以你的页脚现在浮动而不是粘在底部。
我尝试过很多组合，但似乎无法得到我想要的。看来你必须忍受粘性地址栏或浮动页脚。
请对此有任何想法或想法，我们将不胜感激。
谢谢，但不，这在这种情况下不起作用。
不过，今天早些时候，当我在做另一个项目时，它就像一条湿鱼一样击中了我。
从中删除尺寸<html>.
然后将 100vh 添加到您的<body>而不是 100%
（确保仅针对移动设备而不是桌面设备）
然后就可以完美运行了！ xD
虽然在我看来 Chrome 非常棒。在过去的几个月里，隐藏在卷轴上的小地址让我头疼不已。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
