Flexbox如何让高度始终垂直拉伸100%以填充空间？

解决Sidebar和Content-Body无法100%高度适配的问题 #

嘿，我仔细看了你复现的这个布局问题，其实根源在于CSS里height:100%的生效逻辑——它需要父元素有明确的高度值才能继承，你的布局里很多外层容器没把高度逐层传递下去，所以sidebar和content-body才没法撑满整个视口高度。下面是具体的修复方案：

1. 给最外层容器设置全屏高度 #

首先得让最顶层的html、body和#app都撑满整个视口高度，这样后续的子元素才有高度可以继承：

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

2. 让中间容器逐层传递高度 #

你的.h100.w100、main和.content这些中间容器，需要通过Flex布局或者明确设置高度来传递高度。这里推荐用Flex，因为它更灵活适配不同内容：

.h100.w100 {
  height: 100%;
  display: flex;
  flex-direction: column; /* 让header和main垂直排列 */
}

main {
  flex: 1; /* 让main占据header之外的所有剩余高度 */
  display: flex; /* 让main内部的sidebar和content-body水平排列 */
}

.content {
  flex: 1; /* 确保.content占满main的高度 */
  display: flex;
}

3. 让Sidebar和Content-Body撑满高度 #

现在父容器都有了明确的高度，直接给sidebar和content-body设置高度或者用Flex占满空间：

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f5f5f5;
}

.content-body {
  flex: 1; /* 自动占满剩余宽度和高度 */
  height: 100%;
  background-color: #ffffff;
}

额外说明 #

如果你的内容可能动态变化，Flex布局会比固定height:100%更友好——它能自动适配内容高度，避免出现滚动条或者内容溢出的问题。只要确保父容器是Flex容器，子元素用flex:1就能自动占据剩余空间。

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