Chrome Android高度/滚动问题与页脚和地址栏 [英] Chrome android height/scroll issue with footers and the address bar
问题描述
这是我遇到的一个有趣的情况. 您使用的是Android版Chrome浏览器，当您滚动正文时，地址栏将消失并隐藏.太好了！
So here is an interesting situation I have come across. You are on Chrome for android, when you scroll the body the address bar runs away and hides. Great!
现在，您要在页脚底部添加页脚.您可以执行以下操作:
Now you want to add a footer to your page that sticks to the bottom. You do the following:
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>
这非常出色，无论内容大小或视口比例如何，页脚始终会停留在页面底部.
This works brilliantly, the footer will always stick to the bottom of the page regardless of content size or view-port scale.
但是！我在移动设备设计上运行此程序并在Chrome Android中进行了测试，我发现将主体设置为明确的大小，只会滚动内容内在"，从而导致地址栏卡住.换句话说，溢出的内容只是设置为默认滚动. 注意到这一点，我尝试将其更改为min-height，以便在没有可用内容填充时始终为视口大小，或者在碰巧有很多行内容时更改其高度.
However! Running this on a mobile design and testing in Chrome Android I found that setting the body to an explicit size, it will only scroll "content within" causing the address bar to stick around. Overflowing content is just set to default scroll in other words. Noticing this I tried changing it to min-height so that it will always either be the size of the view-port if no content is available to fill it, or change height if there happens to be many lines of content.
但是，这样做会导致contentWrap的高度基于内容而不是父元素(即). <身体>.这样您的页脚现在就会漂浮而不是固定在底部.
Doing this however causes the contentWrap to base its height on the content rather than the parent element ie. <body>. So your footer now floats instead of sticking to the bottom.
我玩了很多组合，似乎无法得到我想要的.似乎您必须使用粘性地址栏或浮动页脚.
I have played around with many combinations and cant seem to get what I want. Seems you have to live with either a sticky address bar OR a floating footer.
请对此提出任何想法或想法.
Please any ideas or thoughts on this would be appreciated.
推荐答案
谢谢，但是在这种情况下不行.
Thanks but no that does not work in this situation.
今天早些时候，尽管在进行另一个项目时，它像打鱼一样打我.
Earlier today though whilst working on another project it hit me like a wet fish.
从<html>移除尺寸.
然后将100vh添加到您的<body>中，而不是100％
Then add 100vh to your <body> instead of 100%
(确保仅定位移动设备，而不定位台式机)
(making sure to only target mobile devices and not desktops)
然后它完美运行！ xD
Then it works perfectly! xD
尽管Chrome很棒imo.在过去的几个月中，滚动显示的小地址使我无数头疼.
Though Chrome is awesome imo. The little address hide on scroll has given me numerous headaches over the past few months.
这篇关于Chrome Android高度/滚动问题与页脚和地址栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
