如何让section元素滚动并占满父元素剩余高度（不使用绝对定位）

你的问题核心在于max-height:100%在flex子元素中无法正确计算高度——因为父元素content的高度是通过flex布局动态分配的，没有明确的height值，百分比高度无法基于此生效。

只需要做两处关键修改即可实现需求：

1. 移除section的max-height:100%：flex:1 1 auto已经会让section作为flex子元素，自动填充content的剩余空间，不需要额外设置百分比高度。
2. 保留overflow-y:auto：当section内部内容高度超过其分配到的空间时，自动显示垂直滚动条，避免撑开父元素导致页面整体滚动。

如果需要让section内部的列表滚动、底部的<p>固定显示，还可以给section添加flex布局，让列表占满剩余空间。

修改后的完整代码 #

CSS

*{ margin: 0 }
main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: black;
}

header, footer{
  flex: 0 0 auto;
  background: red;
  padding: 12px;
}

content{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止content自身溢出，强化布局稳定性 */
}

content nav{
  background: green;
  flex: 0 0 auto;
  padding: 8px;
}

content section{
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
  display: flex; /* 启用内部flex布局 */
  flex-direction: column;
  padding: 8px;
}

content section ul{
  flex: 1 1 auto;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

content section li{
  height: 200px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 8px;
  padding: 8px;
  color: white;
}

content section p{
  flex: 0 0 auto;
  margin: 8px 0 0;
  color: white;
}

HTML

<main>
  <header>header</header>
  <content>
    <nav>nav</nav>
    <section>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <p>after list</p>
    </section>
  </content>
  <footer>footer</footer>
</main>

核心原理 #

• main通过height:100vh和flex-direction:column固定页面高度为视口高度，header、footer固定高度，content自动占据剩余空间。
• content作为垂直flex容器，nav固定高度，section通过flex:1填充content的剩余空间，高度被动态锁定。
• section的overflow-y:auto确保内部内容超出时触发滚动，不会破坏整体布局。
• 给section添加flex布局后，列表可以通过flex:1占满section的剩余高度，实现列表滚动、底部文本固定的效果。

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