如何在不使用CSS Flex的情况下让Footer固定在页面底部（而非屏幕底部）

以下两种方案无需使用Flex布局，既能让页脚在内容不足时固定在页面底部，又能在内容过多时被自动推到页面下方，完全自适应内容高度：

方案一：Grid布局实现 #

利用CSS Grid的行分配特性，让内容区自动填充剩余空间：

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* 头部、内容区、页脚默认对应Grid的三行，无需额外设置 */
header {
  /* 你的头部样式 */
}

main {
  /* 你的内容区样式 */
}

footer {
  /* 你的页脚样式 */
}

原理：grid-template-rows: auto 1fr auto 定义了三行，头部和页脚高度由自身内容决定，中间内容区会占据剩余全部垂直空间，自然实现页脚的固定效果。

方案二：绝对定位+内边距实现 #

这是兼容性极强的传统经典方案：

body {
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding-bottom: 60px; /* 数值需等于页脚的高度 */
  box-sizing: border-box;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 页脚自身高度 */
  /* 其他页脚样式，比如背景色、文字样式等 */
}

原理：给body设置min-height:100vh保证页面至少占满视口高度，padding-bottom预留出页脚位置避免内容被遮挡；页脚用绝对定位固定在页面底部，内容过多时body高度自动超过视口，页脚会随之被推到页面最下方。

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