如何通过position属性将footer定位在页面内容底部（非sticky）

我正在练习CSS布局，现有以body为父容器的header、main、footer三个元素。虽了解flex、grid布局方案，但仅想通过position属性实现footer定位在页面底部，且不想使用position: sticky。请问该如何调整代码？是否必须使用position: sticky？

现有代码如下：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <span>header</span>
        </header>
        <main>
            <span>...</span>
        </main>
        <footer>
            <span>footer</span>
        </footer>
    </body>
</html>

CSS代码 #

* {
  padding: 0;
  margin: 0;
}

body {
  max-width: 1000px;
  min-height: 100vh;
  position: relative;
  margin: 0 auto;
}

header {
  background: red;
  position: absolute;
  width: 100%;
  height: 100px;
}

main {
  background: blue;
  position: absolute;
  width: 100%;
  height: auto;
  top: 100px;
}

footer {
  background: green;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
}

是否必须使用position: sticky？ #

不需要，完全可以通过其他position属性组合实现需求。

现有代码的问题 #

你当前给header和main都设置了position: absolute，这会让它们脱离文档流，导致body的高度无法被内容撑开。当main里的内容较多时，footer会固定在视口底部并盖住部分内容，同时布局会出现混乱。

调整方案1：仅给footer设置绝对定位（推荐） #

这种方案保留header和main的正常文档流，只让footer绝对定位在body底部，同时给main设置padding-bottom预留footer的空间，避免内容被遮挡。

调整后的CSS代码：

* {
  padding: 0;
  margin: 0;
}

body {
  max-width: 1000px;
  min-height: 100vh;
  position: relative;
  margin: 0 auto;
}

header {
  background: red;
  height: 100px;
}

main {
  background: blue;
  padding-bottom: 100px; /* 值等于footer的高度 */
}

footer {
  background: green;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0; /* 确保footer与body左侧对齐 */
}

效果说明：当页面内容较少时，footer会固定在视口底部；当内容超过视口高度时，页面会整体滚动，footer会跟随到页面最底部，不会遮挡内容。

调整方案2：所有元素使用绝对定位（适合内容内部滚动场景） #

如果一定要给所有元素设置绝对定位，可以通过给main设置top和bottom属性，让它自动填充header和footer之间的空间，同时开启内部滚动避免内容溢出。

调整后的CSS代码：

* {
  padding: 0;
  margin: 0;
}

body {
  max-width: 1000px;
  min-height: 100vh;
  position: relative;
  margin: 0 auto;
  overflow: hidden; /* 禁止页面整体滚动 */
}

header {
  background: red;
  position: absolute;
  width: 100%;
  height: 100px;
  top: 0;
}

main {
  background: blue;
  position: absolute;
  width: 100%;
  top: 100px; /* 距离顶部等于header高度 */
  bottom: 100px; /* 距离底部等于footer高度 */
  overflow-y: auto; /* 内容超出时内部滚动 */
}

footer {
  background: green;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
}

效果说明：header和footer始终固定在视口顶部和底部，main区域会自动填充中间空间，当内容过多时，只有main内部会滚动，页面整体不会滚动。

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