嵌套布局中如何让Subcontent占满可用空间且仅显示单个滚动条？

一、简单布局场景（已实现，补充标准写法） #

页面结构为Header + Content + Footer，要求Header、Footer始终可见，Content占满剩余空间且内容溢出时垂直滚动。

标准flex实现方式：

/* 外层容器（如body或根div） */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.header, .footer {
  /* 可设置固定高度或通过padding自适应 */
  padding: 1rem;
  background: #eee;
}

.content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
}

非flex版也可通过calc()计算Content高度：

.page-container {
  min-height: 100vh;
  position: relative;
}

.header, .footer {
  padding: 1rem;
  background: #eee;
}

.content {
  position: absolute;
  top: 60px; /* 对应Header实际高度 */
  bottom: 60px; /* 对应Footer实际高度 */
  left: 0;
  right: 0;
  overflow-y: auto;
  padding: 1rem;
}

二、嵌套布局场景：解决双滚动条与Footer消失问题 #

你遇到的问题核心是：中间Content作为flex容器时未限制自身高度，导致内部内容撑开后超出视口，触发全局滚动；同时Subcontent的局部滚动叠加，形成双滚动条，甚至挤掉Footer。

正确实现步骤： #

1. 外层容器保持flex column布局，锁定整体高度在视口范围内
2. 给中间Content容器设置flex-grow: 1; display: flex; flex-direction: column; overflow: hidden;——其中overflow: hidden是关键，防止Content因内部内容撑开而超出外层容器
3. 内部H3标题保持自适应高度，Subcontent设置flex-grow: 1; overflow-y: auto;，占满Content剩余空间并在溢出时触发局部滚动

完整代码示例： #

<div class="page-container">
  <header class="header">页面头部</header>
  <main class="content">
    <h3>嵌套标题</h3>
    <div class="subcontent">
      <!-- 此处放置大量内容以触发滚动 -->
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <!-- 重复添加内容直到溢出 -->
    </div>
  </main>
  <footer class="footer">页面底部</footer>
</div>

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

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  padding: 1rem;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 关键：阻止Content撑开外层容器 */
  padding: 1rem;
  border: 1px solid #ddd;
}

.content h3 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.subcontent {
  flex-grow: 1;
  overflow-y: auto; /* 内容溢出时触发局部滚动 */
  background: #fafafa;
  padding: 1rem;
}

问题原因拆解： #

• 未给Content设置overflow: hidden时，Content会被Subcontent的内容撑开，导致外层.page-container高度超过100vh，触发全局滚动条
• 同时Subcontent设置了overflow-y: auto，又会出现局部滚动条，形成双滚动条
• 外层容器高度超出视口后，Footer会被挤到视口外，导致不可见

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