我已将我的页脚DIV修复到视口底部,如下所示:
#Footer
{
position: fixed;
bottom: 0;
}
如果页面上的内容不多,则效果很好.但是,如果内容填满页面的整个高度(即垂直滚动条可见),则页脚与内容重叠,我不会这样做.
如何让页脚粘贴到视口的底部,但从不重叠内容？
Sco*_*ver 14
现代的"粘性页脚"解决方案将使用flexbox.
tl; dr ::将容器(主体)设置为display:flex;flex-direction:column要移动到的子(页脚)margin-top:auto.
首先,我们将主体设置为垂直"弯曲"其项目,确保其高度为100%.
然后我们设置flex: 0 0 50px页脚元素,这意味着:"不长大,不缩小,高度为50px".事实上,我们可以flex完全省略属性,然后继续使用height:50px.
我们可以稍微有点鲁莽地设置它本身的display:flex东西<body>,因为flex容器的子元素有一个隐含值flex: 0 1 auto(aka flex:initial)如果省略,它(几乎)等价于flex:none(这是简写
flex:0 0 auto):
该项目根据其宽度和高度属性进行调整.它缩小到最小尺寸以适应容器,但不会增长以吸收Flex容器中的任何额外自由空间.(MDN)
就粘性部分而言,margin-top:auto 页脚上的内容为我们提供了我们想要的东西.应用于弹性容器中,自动边距呈现出新的含义,而不是通常的"获得相等数量的可用空间",它们意味着"吸收所有可用空间".
从规范(8.1.与自动边距对齐):
在通过justify-content和align-self进行对齐之前,任何正空闲空间都会分配到该维度中的自动边距.
陈述更简单:
如果将自动边距应用于弹性项目,则该项目将自动扩展其指定的边距以占用弹性容器中的额外空间
另外:"普通"的flexbox布局方法可能是将中间部分ala弯曲<div id="main>...</div>到100%垂直,这也会使页脚"粘住"到底部.这种方法向我们展示了灵活的盒子模型实际上足够灵活,可以让我们调整/移动隔离元素.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#footer {
background-color: #efefef;
flex: 0 0 50px;/*or just height:50px;*/
margin-top: auto;
}<p>we've assumed only that there's random space-taking content above the footer...</p>
<p>lorem ipsum dolor flex...</p>
<div>
<p>random content.</p><p>random content.</p><p>random content.</p><p>random content.</p>
</div>
<div id="footer">FOOTER</div>