页脚和地址栏的 Chrome android 高度/滚动问题答案

【问题标题】：Chrome android height/scroll issue with footers and the address bar页脚和地址栏的 Chrome android 高度/滚动问题
【发布时间】：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 将其高度基于内容而不是父元素，即。。所以你的页脚现在浮动而不是粘在底部。

我玩过很多组合，但似乎无法得到我想要的。似乎您必须使用粘性地址栏或浮动页脚。

如有任何想法或想法，我们将不胜感激。

【问题讨论】：

标签： android css google-chrome scroll height

【解决方案1】：

当我制作页脚时，我用css编码

 .footerdiv{position:fixed; left:0; right:0; bottom:0; height:60px; z-index:777}

这就是诀窍。

Z-index 使其高于所有其他元素。 Position:fixed 防止它在滚动时移动。左、右、下保持完美尺寸。

随心所欲。

希望这会有所帮助。

【讨论】：

【解决方案2】：

谢谢，但不，在这种情况下不起作用。

今天早些时候，虽然在从事另一个项目时，它像一条湿鱼一样打击了我。

从<html> 中删除维度。

然后将 100vh 添加到您的 <body> 而不是 100%

（确保只针对移动设备而不是台式机）

然后完美运行！ xD

虽然 Chrome 是很棒的 imo。在过去的几个月里，隐藏在滚动条上的小地址让我很头疼。

【讨论】：