【实战】Flex布局-上下自适应

码上行走2025-12-20 10:02

经典的布局场景上下固定、中间填充剩余空间。

思路

将 Flex 主轴设为垂直方向（column），通过 flex: 1 让中间区域自动填充剩余空间，上下区域固定高度或由内容自动撑开。

原理

父容器设置
display: flex
flex-direction: column - 垂直方向排列
min-height: 100vh- 确保容器至少占满整个视口高度

顶部 / 底部区域设置固定高度（如 50px），不指定高度由内容自动撑开。

中间区域设置 flex: 1，自动占据父容器剩余高度；

overflow-y: auto - 内容超出时显示滚动条

示例

html 复制代码

<header class="header">头部</header>
  <main class="main">内容区</main>
  <footer class="footer">底部</footer>
</div>

css 复制代码

* {
  margin: 0;
  padding: 0;
}
 
html, body {
  height: 100%;
}
 
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
 
.header {
  /* 头部高度由内容决定，不设固定高度 */
  background: #333;
  color: white;
  padding: 20px;
}
 
.main {
  flex: 1;  /* 关键：这将使主内容区填充剩余空间 */
  padding: 20px;
  overflow-y: auto; /* 内容过多时可滚动 */
}
 
.footer {
  background: #333;
  color: white;
  padding: 20px;
}

浏览器兼容性

Flex 布局在现代浏览器中有很好的支持（IE10+），如需兼容旧版浏览器，可考虑使用传统方法作为降级方案。