如何让右侧div占满由左侧div撑开的wrapper容器高度？

你的核心需求是让右侧right div的高度和左侧left div撑开的wrapper容器高度保持一致，原代码无法实现的原因有两个：

1. 默认块级元素会垂直排列，left和right会上下分布而非左右并排；
2. wrapper的高度是fit-content（自适应内容），right设置height:100%无法继承这种非明确值的高度。

下面是几种简单可行的实现方案：

方案一：Flexbox布局（推荐） #

Flexbox是现代布局的首选方案，只需修改wrapper的布局方式，就能自动让子元素高度对齐：

.wrapper {
  width: 100%;
  height: fit-content;
  background-color: gold;
  border: solid 1px red;
  /* 添加Flex布局 */
  display: flex;
}

.wrapper .left {
  width: 50%;
  height: 20vh;
  background-color: pink;
}

.wrapper .right {
  width: 50%;
  background-color: blue;
  /* 无需额外设置height，Flex默认align-items: stretch会让子元素占满容器高度 */
}

HTML保持不变即可。Flex布局会让left和right横向排列，并且默认拉伸子元素高度以匹配容器高度，完美满足需求。

方案二：Grid布局 #

Grid布局同样能轻松实现等高列效果，适合更复杂的网格场景：

.wrapper {
  width: 100%;
  height: fit-content;
  background-color: gold;
  border: solid 1px red;
  /* 设置两列网格，每列宽度50% */
  display: grid;
  grid-template-columns: 50% 50%;
}

.wrapper .left {
  height: 20vh;
  background-color: pink;
}

.wrapper .right {
  background-color: blue;
  /* Grid默认让同一行的单元格高度一致 */
}

方案三：兼容旧浏览器的浮动+BFC方案（不推荐） #

如果需要兼容IE等旧浏览器，可以用浮动结合BFC（块级格式化上下文）实现：

.wrapper {
  width: 100%;
  height: fit-content;
  background-color: gold;
  border: solid 1px red;
  /* 清除浮动影响 */
  overflow: hidden;
}

.wrapper .left {
  width: 50%;
  height: 20vh;
  background-color: pink;
  /* 左浮动让元素并排 */
  float: left;
}

.wrapper .right {
  width: 50%;
  height: 100%;
  background-color: blue;
  /* 触发BFC，让元素与浮动元素并排并继承容器高度 */
  overflow: hidden;
}

这种方案依赖浮动和BFC的特性，代码复杂度高于Flex/Grid，仅在必要时使用。

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