Question

所以这是我遇到的一个有趣的情况。你在Chrome浏览器上安装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的高度基于内容而不是父元素ie。＆LT;体取代。所以你的页脚现在漂浮而不是粘在底部。

我玩了许多组合，似乎无法得到我想要的东西。似乎你必须使用粘性地址栏或浮动页脚。

请不要对此有任何想法或想法。

Answer 1

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

今天早些时候，虽然在另一个项目上工作，但它像湿鱼一样打击我。

从<html>移除尺寸。

然后将100vh添加到<body>而不是100％

（确保仅定位移动设备而不是桌面）

然后它完美无缺！的xD

虽然Chrome很棒但是很棒。滚动的小地址隐藏在过去的几个月里让我头疼不已。

Answer 2

当我进行页脚时，我在css中编码

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

这就是诀窍。

Z-index使其高于所有其他元素。位置：固定使其在滚动时不会移动。并且左，右，底部保持尺寸完美。

你想要的风格。

希望这有帮助。

Chrome机器人高度/滚动问题与页脚和地址栏

2 个答案: