CSS Flexbox布局中实现动态高度滚动条

核心问题分析 #

给#content设置height: 100%时，它会基于父容器高度计算，但如果父容器无明确高度约束、未考虑导航栏高度，就会导致内容区域把导航栏挤出视口。

解决方案步骤 #

1. 给根容器设置全屏高度
   确保html和body占满整个视口高度，避免高度塌陷：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 设置Flex父容器的高度与方向
   假设整体容器为Flex容器（如.container），给它设置height: 100%，指定垂直排列并禁止容器自身溢出：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

3. 固定导航栏高度，让内容区域自动填充剩余空间
   给#navbar设置固定高度（或让它自适应内容），给#content添加flex: 1属性占据剩余空间，同时开启垂直滚动：

#navbar {
  /* 可设置固定高度，示例值 */
  height: 60px;
  /* 若要自适应内容，删除height属性即可 */
}

#content {
  flex: 1;
  overflow-y: auto;
  /* 可选：避免水平滚动条 */
  overflow-x: hidden;
}

原理说明 #

• flex: 1等价于flex-grow: 1、flex-shrink: 1、flex-basis: 0%，会让#content自动填充导航栏之外的所有剩余空间。
• overflow-y: auto会在内容超出#content高度时自动显示垂直滚动条，不会影响导航栏位置。

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