CSS Flex布局下如何实现navbar占满整个页面高度而非视口高度？

你当前的导航栏无法占满高度是两处配置问题导致的：

• flex父容器main设置了align-items: flex-start，强制子元素顶部对齐，关闭了flex布局默认的子元素自动拉伸等高特性
• 导航栏nav设置的height: 100%依赖父元素的明确高度值，而你没有给main设置固定高度，这个属性不会生效

修复代码 #

仅需调整main的flex对齐规则即可，修改后的完整CSS如下：

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

main {
  display: flex;
  justify-content: flex-start;
  /* 替换原有的align-items: flex-start，设为stretch即可开启子元素等高拉伸 */
  align-items: stretch;
}

nav {
  width: 60rem;
  background: blue;
  color: white;
  padding: 1rem;
  /* 原有的height: 100%可以直接删除，stretch属性会自动让nav撑满父容器高度 */
}

section {
  padding: 1rem;
}

HTML代码无需做任何修改。

可选扩展 #

如果需要在右侧内容高度不足一屏时，导航栏也能撑满整个浏览器视口高度，可以额外添加如下规则：

html, body, main {
  min-height: 100vh;
}

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