如何在头部高度可变时实现footer固定底部且主内容可滚动？

针对你遇到的Header高度不固定、需Main单独滚动、Footer固定底部且断点可变高度的需求，无需硬编码计算高度，用CSS Flexbox或Grid就能完美解决，以下是具体实现：

方案一：Flexbox布局（推荐，兼容性好） #

核心思路是利用Flex的弹性空间分配，让Header和Footer自动适应自身高度，Main占满剩余垂直空间并支持滚动。

CSS代码 #

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  overflow: hidden; /* 禁止整页滚动 */
}

body {
  display: flex;
  flex-direction: column; /* 垂直方向排列元素 */
}

header {
  background-color: coral;
  flex-shrink: 0; /* 防止Header被压缩 */
  /* 无需硬编码height，高度由内部内容自动撑开 */
}

main {
  background-color: goldenrod;
  flex: 1; /* 占满剩余垂直空间 */
  overflow-y: auto; /* 内容超出时触发垂直滚动 */
}

footer {
  background-color: cadetblue;
  flex-shrink: 0; /* 防止Footer被压缩 */
  height: 75px; /* 默认高度 */
}

/* 断点处仅修改Footer高度即可，无需调整Main */
@media (min-width: 500px) {
  footer {
    height: 50px;
  }
}

/* Header在断点处的样式调整（如内边距、字体）直接修改，高度自动适配 */
@media (min-width: 900px) {
  header {
    padding: 20px 0;
    font-size: 1.2rem;
  }
}

HTML代码 #

<html>
  <body>
    <header>可变高度Header（内容决定高度）</header>
    <main>
      <!-- 示例内容：超出时会自动滚动 -->
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
    </main>
    <footer>固定底部的Footer（断点可变高度）</footer>
  </body>
</html>

方案二：Grid布局（代码更简洁） #

利用Grid的行模板规则，直接指定Header和Footer为自适应高度，Main自动填充剩余空间。

CSS代码 #

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 行高度：Header自适应、Main占满、Footer自适应 */
}

header {
  background-color: coral;
}

main {
  background-color: goldenrod;
  overflow-y: auto;
}

footer {
  background-color: cadetblue;
  height: 75px;
}

@media (min-width: 500px) {
  footer {
    height: 50px;
  }
}

HTML代码与方案一一致，无需修改。

方案优势 #

1. 完全摆脱硬编码高度的依赖，Header高度随内容自动变化，无需手动计算
2. Footer仅需在断点处修改自身高度，Main会自动适配剩余空间，无需同步调整
3. 整页禁止滚动，仅Main区域内容超出时触发滚动，完全符合需求
4. 纯CSS实现，无需JS干预，性能稳定

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