防止固定页脚重叠内容 [英] Preventing fixed footer from overlapping content
问题描述
#Footer
{
位置：固定;
bottom：0;
}
如果页面上没有太多内容，但是，如果内容填充了页面的整个高度（即垂直滚动条可见），则页脚与内容重叠，我不会这样做。
我可以让页脚粘到视口的底部，但不会重叠内容吗？
现代的粘脚 解决方案将使用 flexbox 。
$ b tl; dr：：将容器（主体）设置为 display：flex; flex-direction： code>以及您想要向下移动到 margin-top：auto 的孩子（footer）。
首先，我们设置主体垂直弯曲它的项目，确保它的高度为100％。
然后我们设置 flex： 0 0 50px 在页脚元素上，这意味着：不增长，不收缩，高度为50px。实际上，我们可以完全省略 flex 属性，只需使用 height：50px 即可。 我们可以在< body> 中设置 display：flex code>本身有点鲁莽，因为flex容器的子元素的隐式值为 flex：0 1 auto （又名 flex：initial < （几乎）等于 flex：none （这是
flex的简写形式：/ code> 0 b
$ b
该项目的大小根据其宽度和高度属性而定。它
缩小到最小尺寸以适应容器，但不会增长到
吸收flex容器中的任何额外可用空间。（ MDN ）
到目前为止作为粘性部分，脚注中的 margin-top：auto 就是我们想要的。应用在flex容器中，auto margin具有新的含义，而不是通常的获得相同数量的可用空间，它们意味着吸收所有可用空间。
在通过justify-content和align-self进行对齐之前，分配任何正的
空闲空间至该维度的自动页边空间。
除此之外：正常的柔性箱布局方法可能会弯曲一个中间部分ala < div id =main> ...< / div> 垂直放置到100％， 页脚粘到底部。这种方法告诉我们，灵活的盒子模型事实上足够灵活，可以让我们调整/移动孤立的元素。
body {display：flex; flex-direction：列; min-height：100vh;}＃footer {background-color：#efefef; flex：0 0 50px; / *或只是height：50px; * / margin-top：auto;}
< p>我们假设只有在页脚上方有随机空间的内容...< / p>< p> lorem ipsum dolor flex ...<< p ; / p为H.< DIV>随机内容< / p>< p>随机内容< / p>< p>随机内容< / p>< p>随机内容< / p>< p> / div>< div id =footer> FOOTER< / div>
I've fixed my footer DIV to the bottom of the viewport as follows:
#Footer
{
position: fixed;
bottom: 0;
}
This works well if there isn't much content on the page. However, if the content fills the full height of the page (i.e. the vertical scroll bar is visible) the footer overlaps the content, which I don't wont.
How can I get the footer to stick to the bottom of the viewport, but never overlap the content?
A modern "sticky footer" solution would use flexbox.
tl;dr:: set container (body) to display:flex;flex-direction:column and the child (footer) you want to move down to margin-top:auto.
First, we set the body to "flex" its items vertically, making sure that it is 100% height.
Then we set flex: 0 0 50px on the footer element, which means: "don't grow, don't shrink, and have a height of 50px". We could in fact, omit flex attribute entirely and just go with height:50px.
We can set display:flex on things like the <body> itself somewhat recklessly, because children of a flex container have a implicit value of flex: 0 1 auto (aka flex:initial) if omitted, which is (almost) equivalent to flex:none (which is shorthand for
flex:0 0 auto):
The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.(MDN)
As far as the sticky part, it's the margin-top:auto on the footer that gives us what we want. Applied within a flex container, auto margins take on a new meaning, instead of the usual "get equal amount of free space", they mean "absorb ALL available free space".
From the spec (8.1. Aligning with auto margins):
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Stated more simply:
If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container
Aside: the "normal" flexbox layout approach would probably be to flex a middle section ala <div id="main>...</div> to 100% vertically, which also would make a footer "stick" to the bottom. This approach shows us the flexible box model is, in fact, flexible enough to let us resize/move isolated elements.
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>
这篇关于防止固定页脚重叠内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
