如何实现页脚固定于页面底部且内容较多时不遮挡上方元素

你现在用固定定位实现的页脚遮挡内容，本质是position: fixed的布局特性导致的：

• 带fixed定位的元素会完全脱离正常文档流，不会在文档中为自身预留布局占位空间
• 它的定位参照是浏览器可视视口，会始终悬浮在页面上层，不管文档流内的元素排布到什么位置

文档流里的普通段落、块级元素不知道页脚的存在，会顺着页面一路排布到视口最底端，自然就被浮在上层的固定页脚遮挡了。

推荐用Flexbox布局实现，兼容成本极低，也没有固定定位的遮挡问题，实现步骤如下：

• 给页面最外层的根容器设置满视口的最小高度，开启纵向弹性布局

body {
  /* 让页面至少占满一整屏视口高度 */
  min-height: 100vh;
  display: flex;
  /* 子元素按纵向方向排列 */
  flex-direction: column;
  /* 清除浏览器默认给body加的外边距，避免布局偏移 */
  margin: 0;
}

• 给装所有正文内容的容器设置弹性撑满规则

.content-container {
  /* 自动占满根容器除了页脚外的所有剩余空间 */
  flex: 1;
}

• 调整下DOM的类名匹配上面的样式规则：

<!-- 正文内容容器 -->
<div class="content-container">
  <p>Helloworld</p>
  <p>Helloworld</p>
  <p>Helloworld</p>
  <p>Helloworld</p>
  <p>Helloworld</p>
  <p>Helloworld</p>
  <!-- 这里放再多段落元素，都不会和页脚重叠 -->
</div>
<footer>
  <h1>Footer Content</h1>
</footer>

这个方案的实际效果：

• 正文内容很少、总高度不足一屏时，页脚会自动被顶到视口最底部，不会悬浮在页面中间位置
• 正文内容很多、总高度超过一屏时，正文会正常向下延展，页脚会自然排在所有正文元素的最末尾，完全解决悬浮遮挡的问题，滚动到页面最底端才能看到完整页脚。

如果因为特殊业务要求必须用position: fixed把页脚钉在视口底部，也需要手动给正文容器预留和页脚高度完全一致的底部内边距，否则一定会出现遮挡：

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* 假设当前页脚高度固定为80px */
  height: 80px;
  background: #fff;
}
/* 给正文容器补80px的底部内边距，给固定页脚留出位置 */
.content-container {
  padding-bottom: 80px;
}

注意：这种方案的维护成本很高，如果后续页脚高度动态变化（比如移动端文字换行、内容展开收起），很容易出现预留空间不匹配的问题，非必要不推荐使用。

内容的提问来源于stack exchange，提问作者htoniv