Flexbox实现固定头脚与可滚动内容列（无需计算高度）

核心思路是利用Flexbox的空间分配特性，让中间内容区自动填充头脚之外的剩余高度，同时通过Flex容器的默认拉伸行为让滚动列获得完整高度，无需手动计算100vh减去头脚高度。

实现步骤与代码示例 #

HTML结构

<body>
  <header>固定头部</header>
  <main>
    <aside class="left-column">
      <!-- 这里放大量内容 -->
      <div class="content-item">内容项 1</div>
      <div class="content-item">内容项 2</div>
      <div class="content-item">内容项 3</div>
      <!-- ... 重复添加更多内容触发滚动 -->
    </aside>
    <section class="right-column">右侧内容区域</section>
  </main>
  <footer>固定底部</footer>
</body>

CSS样式

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  padding: 1.2rem;
  background-color: #f5f5f5;
  border: 1px solid #eee;
}

main {
  flex: 1;
  display: flex;
}

.left-column {
  width: 220px;
  background-color: #e8e8e8;
  overflow-y: auto;
  padding: 1rem;
}

.right-column {
  flex: 1;
  padding: 1.5rem;
  background-color: #fff;
}

.content-item {
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #fff;
  border-radius: 4px;
}

关键原理说明 #

1. 最外层Flex布局：给<body>设置display: flex; flex-direction: column; min-height: 100vh，让页面整体垂直排列，且至少占满视口高度。header和footer会按自身内容高度占据空间，中间的main通过flex: 1自动填充剩余所有高度。
2. 中间内容区的Flex嵌套：main设置为display: flex，内部的左侧列和右侧列会默认沿水平方向排列，且Flex容器的align-items: stretch（默认属性）会让子元素自动拉伸到与容器相同的高度。
3. 滚动列的生效条件：左侧列直接设置overflow-y: auto即可，因为它已经通过Flex的拉伸特性获得了完整的容器高度，无需手动设置height: 100%。当内容超出列的高度时，自动触发垂直滚动。

这种方案完全依赖Flexbox的自动空间分配，适配各种屏幕尺寸和头脚高度变化，不需要任何硬编码的高度计算。

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