使用Flexbox限制表格高度并实现滚动的技术问题咨询

要实现你要的全屏效果，核心是让Flex容器占满整个视口，同时给可滚动的内容区域分配剩余空间，具体实现如下：

基础结构与代码 #

HTML 结构 #

<div class="page-container">
  <header class="page-header">头部区域</header>
  <main class="page-content">
    <!-- 这里放大量内容，测试滚动效果 -->
    <p>测试内容</p>
    <p>测试内容</p>
    <!-- 重复多次直到超出视口 -->
  </main>
  <footer class="page-footer">底部区域</footer>
</div>

CSS 样式 #

/* 让根元素和容器占满整个视口 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 或者用 min-height: 100vh，适配移动端更友好 */
  /* min-height: 100vh; */
}

/* 头部和底部固定高度，不被压缩 */
.page-header, .page-footer {
  flex-shrink: 0;
  padding: 1rem;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

/* 内容区域自动填充剩余空间，溢出时滚动 */
.page-content {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

关键要点说明 #

• 占满视口：通过给html、body和容器设置height:100%（或min-height:100vh），确保布局从顶到底铺满浏览器窗口。
• 垂直Flex布局：flex-direction: column让元素垂直排列，适配页面的上下结构。
• 固定区域不压缩：flex-shrink: 0保证头部和底部不会因为内容区域的挤压而缩小，维持原有高度。
• 内容滚动：flex:1让内容区域自动占据容器的剩余空间，overflow:auto则在内容超出区域高度时自动显示滚动条，同时窗口调整大小时，内容区域会跟着自适应变化。

之前用max-height没效果的原因是，它只是限制了元素的最大高度，没有让元素自动填充剩余空间，配合Flex的flex:1才能实现响应式的空间分配和滚动效果。

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