如何用CSS Flexbox设置容器高度为子元素100%且子元素拉伸至屏幕高度？

嘿，我来帮你搞定这个布局需求！你想要实现的核心是让每个.box元素铺满屏幕高度，同时.box-wrap的高度能匹配子元素的100%高度（本质就是让.box-wrap也占满屏幕高度，从而支撑子元素拉伸到对应高度）。咱们一步步调整代码：

步骤1：设置根元素的基础高度 #

要让元素能基于屏幕高度设置100%高度，首先得给html和body明确高度，否则所有子元素的height:100%都会没有参照对象：

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

步骤2：调整.box-wrap的Flex属性 #

你的.box-wrap已经用了display: flex，现在需要确保它能继承根元素的高度，同时让子元素自动拉伸高度：

.box-wrap {
  height: 100%; /* 继承body的100%高度，也就是屏幕高度 */
  background: blue;
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 这是Flex默认值，明确写出更清晰，让子元素高度拉伸至父元素高度 */
}

步骤3：让.box元素拉伸并占满空间 #

给.box添加flex: 1属性，让它们平分.box-wrap的可用宽度，同时因为align-items: stretch，它们的高度会自动匹配.box-wrap的高度（也就是屏幕高度）：

.box {
  flex: 1; /* 平分父容器的宽度，每个.box占等宽空间 */
  /* 可选：添加内边距或背景色方便观察效果 */
  padding: 1rem;
  background: rgba(255,255,255,0.1);
}

完整代码示例 #

HTML（保持你的原有结构） #

<div class="box-wrap"> 
  <div class="box"> 
    <h3>new tab h3</h3> 
  </div> 
  <div class="box"> 
    <h3>new tab h3</h3> 
  </div> 
  <div class="box"> 
    <h3>new tab h3</h3> 
    <h3>new tab h3</h3> 
  </div> 
</div>

CSS（修改后的完整代码） #

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

.box-wrap {
  height: 100%;
  background: blue;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.box {
  flex: 1;
  padding: 1rem;
  background: rgba(255,255,255,0.1);
}

为什么这样有效？ #

• html和body的height:100%为.box-wrap的高度提供了顶层参照，确保它能占满屏幕高度。
• display: flex让.box-wrap成为Flex容器，align-items: stretch默认会让所有子元素（.box）的高度拉伸至容器的高度。
• flex:1让每个.box平分容器的宽度，保证它们在水平方向均匀分布，同时因为高度被拉伸，自然就铺满了屏幕高度。

另外注意你原来代码里的.box-1类，应该是笔误指向.box吧？如果是单独的元素，你可以根据情况调整，但上面的方案已经覆盖了你的核心需求~

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