Html 防止固定页脚内容重叠

我已将页脚DIV固定到视口底部，如下所示：

#Footer
{
    position: fixed;
    bottom: 0;
}

如果页面上没有太多内容，那么这种方法很有效。但是，如果内容填满了页面的整个高度（即垂直滚动条可见），页脚会与内容重叠，我不会这样做

---

如何使页脚粘贴到视口底部，但不与内容重叠？

尝试将“位置”属性设置为“静态”

position: static;

---

问题是

固定的
位置将其从文档流中移除。您可以将
页边距底部
添加到与
#页脚
高度相等的正文内容中。这将确保页脚后面始终有一个与页脚高度相等的空白，防止页脚与内容重叠。
现代的“粘性页脚”解决方案将使用

tl；dr:：将容器（主体）设置为
显示：flex；弹性方向：列
和要向下移动到
页边距顶部的子项（页脚）：自动

首先，我们将主体设置为垂直“弯曲”其项目，确保其高度为100%

然后我们在footer元素上设置
flex:050px
，这意味着：“不增长，不收缩，高度为50px”。实际上，我们可以完全省略
flex
属性，只使用
height:50px

我们可以在
本身这样的东西上设置
display:flex
，这有点鲁莽，因为flex容器的子容器有一个隐式值
flex:01 auto
（又称
flex:initial
），如果省略，它（几乎）相当于
flex:none
（这是
flex:0自动
）：

项目的大小取决于其宽度和高度属性。信息技术
收缩到其最小大小以适合容器，但不会增长到
吸收flex容器中多余的可用空间。（）

至于粘性部分，是页脚上的
margintop:auto
提供了我们想要的。应用于flex容器中，自动边距有了新的含义，而不是通常的“获得等量的自由空间”，它们的意思是“吸收所有可用的自由空间”

从规范（）中：

在通过内容对齐和自我对齐对齐之前，任何正面
自由空间分配给该维度中的自动边距

更多说明：

如果将自动边距应用于弹性项目，该项目将自动
扩展其指定的边距以占用flex中的额外空间
容器

旁白：“正常的”flexbox布局方法可能是调整中间部分ala
这是我使用jQuery的另一个解决方案。要进行设置，不需要编写太多代码，只需要HTML



你的头衔
你的头球

一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。
一些文本以启用滚动。。。

你的页脚
这对我不起作用。在Firefox中使用
position:static
，会使页脚从每页消失。