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

Question

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

Mol*_*101 6 css height android scroll google-chrome

所以这是我遇到的一个有趣的情况.你在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;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<body>
  
  <div id="contentWrap">
    <div id="footer">
    </div>
  </div>
  
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这非常有效,无论内容大小或视口规模如何,页脚都将始终粘贴在页面底部.

然而!在移动设计上运行此功能并在Chrome Android中进行测试我发现将主体设置为显式大小,它只会滚动"内容",导致地址栏停留.换句话说,溢出内容仅设置为默认滚动.注意到这一点,我尝试将其更改为最小高度,以便它始终是视图端口的大小,如果没有可用于填充它的内容,或者如果恰好有多行内容则更改高度.

但是,这样做会导致contentWrap将其高度基于内容而不是父元素ie.<BODY>.所以你的页脚现在漂浮而不是粘在底部.

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

请关注此任何想法或想法.

Answer 1

Mol*_*101 5

谢谢，但是在这种情况下不行。

今天早些时候，尽管在进行另一个项目时，它像一条湿鱼一样打我。

从中删除尺寸<html>。

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

（确保仅定位移动设备而不定位台式机）

然后，它完美地工作！xD

虽然Chrome很棒imo。在过去的几个月中，滚动显示的小地址使我头疼不已。

归档时间：	11 年，2 月前
查看次数：	6135 次
最近记录：	11 年，1 月前