CSS设置的footer滚动时无法固定在页面底部该如何解决？

API 探路者

2026-10-17

问题原因

你当前的实现存在两个核心问题：

position: absolute 定位的元素是相对于最近的非static定位的父元素生效的，你没有给html、body设置position: relative的话，footer默认是相对于初始视口定位，当页面内容高度超过视口高度时，footer只会固定在初始视口的底部，滚动页面时就会跟着向上移动，不会停在整个页面的最底部。
你没有给根元素设置最小高度为视口高度，页面整体高度默认由内容撑开，内容不足时无法把footer撑到视口底部。

最优实现方案（Flex粘性页脚，无JS、兼容性好，完全符合需求）

首先调整HTML结构，给所有内容section套一个语义化的main标签（不加容器也可实现，加容器语义化更友好）：

<body>
  <header>...</header>
  <main>
    <section>...</section>
    <section>...</section>
    <!-- 所有内容section都放在main里 -->
  </main>
  <footer>...</footer>
</body>

然后修改CSS代码：

* {margin: 0;padding: 0;box-sizing: border-box;}
/* 给根元素设置高度为100%，让页面可以占满整个视口 */
html, body {
  height: 100%;
}
/* 把body设置为纵向flex容器 */
body {
  display: flex;
  flex-direction: column;
}
header {background: #000;color: white;font-size: 1.5rem;padding: 1.5rem;text-align: center;}
/* main设置flex:1，自动占满header和footer之外的所有剩余空间 */
main {
  flex: 1;
}
section {background: #f4f4f4;border: 1px solid red;margin:0.5rem;padding: 0.75rem;width: 80%;}
/* footer去掉绝对定位相关属性，保留原有其他样式即可 */
footer {background: #000;color: wheat;padding: 2rem;font-size: 1.5rem;text-align: center;width: 100%;}