页脚和地址栏的 Chrome android 高度/滚动问题
Posted
技术标签:
【中文标题】页脚和地址栏的 Chrome android 高度/滚动问题【英文标题】：Chrome android height/scroll issue with footers and the address bar 【发布时间】：2014-12-11 18:33:44 【问题描述】：所以这是我遇到的一个有趣的情况。 您在 Chrome for android 上，当您滚动正文时，地址栏会跑掉并隐藏。太好了！
现在您想在页面底部添加页脚。您执行以下操作：
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 中进行测试我发现将正文设置为明确的大小，它只会滚动“内部内容”，从而导致地址栏停留在周围。换句话说，溢出内容只是设置为默认滚动。 注意到这一点，我尝试将其更改为 min-height ，这样如果没有可用的内容填充它，它将始终是视口的大小，或者如果碰巧有很多内容行，则更改高度。
但是，这样做会导致 contentWrap 将其高度基于内容而不是父元素，即。 。所以你的页脚现在浮动而不是粘在底部。
我玩过很多组合，但似乎无法得到我想要的。似乎您必须使用粘性地址栏或浮动页脚。
如有任何想法或想法，我们将不胜感激。
【问题讨论】：
【参考方案1】：当我制作页脚时， 我用css编码
.footerdivposition:fixed; left:0; right:0; bottom:0; height:60px; z-index:777
这就是诀窍。
Z-index 使其高于所有其他元素。 Position:fixed 防止它在滚动时移动。左、右、下保持完美尺寸。
随心所欲。
希望这会有所帮助。
【讨论】：
【参考方案2】：谢谢，但不，在这种情况下不起作用。
今天早些时候，虽然在从事另一个项目时，它像一条湿鱼一样打击了我。
从<html> 中删除维度。
然后将 100vh 添加到您的 <body> 而不是 100%
（确保只针对移动设备而不是台式机）
然后完美运行！ xD
虽然 Chrome 是很棒的 imo。在过去的几个月里，隐藏在滚动条上的小地址让我很头疼。
【讨论】：
以上是关于页脚和地址栏的 Chrome android 高度/滚动问题的主要内容，如果未能解决你的问题，请参考以下文章