所以这是我遇到的一个有趣的情况.
你在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. <体取代.所以你的页脚现在漂浮而不是粘在底部.
我玩过许多组合,似乎无法得到我想要的东西.似乎你必须使用粘性地址栏或浮动页脚.
请关注此任何想法或想法.
最佳答案
原文链接:https://www.f2er.com/css/427197.html