固定页脚不遮挡内容（不使用固定值）的CSS实现方案

这个问题确实很常见，尤其是刚接触CSS布局的时候，我来给你两个不用JavaScript、也不用固定数值的解决方案，完美适配页脚高度变化的场景：

方案一：CSS锚点定位（支持页脚始终固定在底部） #

这是利用CSS新出的**锚点定位（Anchor Positioning）**特性，能动态获取页脚的高度，自动调整内容区的底部间距，完全不用写固定数值。

代码示例 #

<div class='content'> 
  <p>content</p> 
  <p>content</p> 
  <p>More and more content</p>
  <!-- 可以添加更多内容测试滚动效果 -->
</div> 
<footer id="page-footer"> 
  <p>footer.</p> 
</footer>

body {
  margin: 0; /* 清除默认边距，避免布局偏移 */
}

.content {
  color: green;
  /* 动态设置底部内边距：页脚高度 + 10px的间距 */
  padding-bottom: anchor(--footer height) + 10px;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  anchor-name: --footer; /* 定义锚点，让内容区可以获取它的尺寸 */
  background: white; /* 加上背景色，避免内容透过页脚显示 */
  /* 不用固定height，让页脚内容自动撑开高度 */
}

说明 #

• 当页脚内容变化导致高度改变时，content的padding-bottom会自动同步更新，不会出现遮挡问题。
• 兼容性：目前Chrome 119+、Edge 119+等现代浏览器已经支持，如果你需要兼容更旧的浏览器，可以参考下面的方案。

方案二：CSS Grid布局（兼容性更好，但页脚随内容滚动） #

如果可以接受页脚在内容不足时固定在视口底部，内容过长时随页面滚动到底部，那这个方案兼容性极佳，所有现代浏览器都支持：

代码示例 #

<div class='content'> 
  <p>content</p> 
  <p>content</p> 
  <p>More and more content</p>
  <!-- 可以添加更多内容测试滚动效果 -->
</div> 
<footer> 
  <p>footer.</p> 
</footer>

body {
  min-height: 100vh; /* 让页面至少占满视口高度 */
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto; /* 内容区占满剩余空间，页脚自适应高度 */
  gap: 10px; /* 内容和页脚之间的间距 */
}

.content {
  color: green;
}

footer {
  background: white;
}

说明 #

• 这个方案不需要固定定位，页脚始终在文档流中，自然不会遮挡内容，同时页脚高度完全由内容决定。
• 唯一的区别是，当内容很长时，你需要滚动到页面底部才能看到页脚，不符合“滚动时始终可见”的要求，但胜在兼容性好。

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