上下固定，中间滚动布局如何实现？

⚡ 速记答案（30 秒）

header 和 footer 固定高度，中间区域 overflow:auto。Flex 写法：wrap 设 min-height:100vh、display:flex、flex-direction:column，header/footer 设 flex:0 0 auto，main 设 flex:1 1 auto、overflow:auto。

📖 详细讲解

标准面试回答（推荐记住）

上下固定中间滚动的布局用 Flex 很容易实现。容器设置 min-height: 100vh、display: flex、flex-direction: column。header 和 footer 设置固定高度，flex: 0 0 auto 不伸缩。中间的 main 设置 flex: 1 1 auto 占满剩余空间，overflow: auto 让内容溢出时可滚动。这样 header 和 footer 始终可见，中间内容超出时独立滚动。

✅ 面试要点

•Flex flex-direction: column
•main 设 overflow: auto
•header/footer 设固定高度

💻 代码示例

上下固定中间滚动

<style>
body { margin: 0; }
.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header, footer {
  height: 60px;
  flex: 0 0 auto;
  background: #1a1a1a;
}
main {
  flex: 1 1 auto;
  overflow: auto;
}
</style>

<div class="wrap">
  <header>Header</header>
  <main>内容区域（可滚动）</main>
  <footer>Footer</footer>
</div>

🎨 效果预览