如何在非粘性页眉和页脚间实现可自适应的粘性Div？

核心需求回顾 #

• 页眉、页脚、主体高度均由自身内容决定（无固定高度）
• 页面整体仅出现一个滚动条
• 内容不足时，页脚自动固定在视口底部；内容溢出时，页眉/页脚随页面滚动，主体区域自适应

方案1：CSS Grid（推荐，语义化更强） #

Grid布局天生适配这种“头部-主体-尾部”的结构，无需手动计算高度，完全支持未知高度的元素。

HTML结构

<header>页眉内容，高度随内容变化</header>
<main>
  主体内容区域，高度未知。可添加大量内容测试滚动效果，或少量内容验证页脚位置。
</main>
<footer>页脚内容，高度随内容变化</footer>

CSS代码

/* 重置默认边距，确保根元素占满视口 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Grid布局：页眉/页脚高度自适应，主体占剩余空间 */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* 可选：给页眉/页脚添加样式区分 */
header, footer {
  background-color: #f5f5f5;
  padding: 1rem;
}

main {
  padding: 1rem;
}

方案2：改进版Flexbox #

如果你更习惯Flexbox，只需调整之前的实现，移除主体区域的overflow: auto即可实现全局滚动：

CSS代码

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

/* 主体占满剩余空间，内容溢出时撑开整个页面 */
main {
  flex: 1;
  padding: 1rem;
}

header, footer {
  background-color: #f5f5f5;
  padding: 1rem;
}

方案说明 #

• 两个方案均为纯CSS实现，无需JavaScript
• 当页面内容不足时，主体区域自动填充视口剩余空间，页脚固定在底部；当内容超过视口高度时，整个页面出现全局滚动条，页眉/页脚随内容滚动，不会遮挡主体内容
• 解决你之前Flexbox实现中“中间区域单独滚动”的问题——只需移除main的overflow: auto，让内容自然撑开页面即可

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