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

前端之家收集整理的这篇文章主要介绍了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;
}

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

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

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

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

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

最佳答案
谢谢,但没有在这种情况下不起作用.

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

从< html>中删除尺寸.

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

(确保仅定位移动设备而非桌面)

然后它完美地运作!的xD

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

猜你在找的CSS相关文章