如何实现父容器占满body高度时，子div动态高度且overflow:auto不溢出（非JS/绝对定位）

云原生阿岚

2026-8-22

解决方案：Flex布局实现自适应高度的滚动子容器

要实现你的需求，核心是利用Flex布局的flex-grow属性让第二个子容器自动填充父容器的剩余空间，同时确保父容器占满body的100%高度。以下是修正后的代码：

关键调整说明：

给html和body设置height: 100%并清除默认边距，确保父容器能获取完整的视口高度。
父容器添加height: 100%，配合flex-direction: column让子元素垂直排列。
第二个子容器用flex: 1替代height: 100%，自动占据父容器剩余空间；同时保留overflow: auto，内容超出时自动显示滚动条。

完整代码：

HTML

<div class="homepage-parent">
   <div class="homepage-parent_child1">这里是动态内容，高度由内部元素决定</div>
   <div class="homepage-parent_child2">
     <!-- 示例大量内容，超出时会触发滚动 -->
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
     <p>测试内容</p>
   </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免不必要的滚动条 */
}

.homepage-parent {
  width: 100%;
  height: 100%; /* 让父容器占满body的100%高度 */
  display: flex;
  flex-direction: column;
}

.homepage-parent_child1 {
  width: 100%;
  /* 高度由内部内容自动决定，无需额外设置 */
  background: #f0f0f0;
  padding: 1rem;
}

.homepage-parent_child2 {
  width: 100%;
  flex: 1; /* 自动填充父容器的剩余空间 */
  overflow: auto; /* 内容超出时显示滚动条 */
  background: #e0e0e0;
  padding: 1rem;
}