如何实现占满banner下方剩余高度且内容溢出可滚动的div布局

问题原因 #

你当前代码的核心问题有两处：

• body 未设置高度继承，无法拿到html的100%高度，整体flex容器没有明确的高度上限
• .section 未配置占满剩余高度的属性，高度会被内部内容撑开，自然无法触发内部content区域的滚动

修正后的CSS代码 #

html {
  height: 100%;
}

body {
  margin: 0px;
  display: flex;
  flex-direction: column;
  /* 新增：继承html的100%高度，让页面占满全屏 */
  height: 100%;
}

.section {
  display: flex;
  /* 新增：占满头部banner之外的所有剩余高度 */
  flex: 1;
}

.content {
  background: gold;
  /* 优化：溢出时才显示滚动条，替代始终显示的scroll */
  overflow: auto;
  flex: 1;
}

.left {
  background: tomato;
}

.right {
  background: lightgreen;
}

HTML代码不需要做任何修改，替换上述CSS即可实现需求：头部banner固定高度，下方左右侧边栏始终占满剩余高度，中间主内容区域溢出时自动显示滚动条。

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