HTML/CSS布局问题：如何让Box1、Box3高度匹配Box2并基于父元素百分比

嘿，我懂你要实现的效果——三个盒子横向排列，Box1和Box3的高度自动跟Box2保持一致，而且Box2的高度是基于父元素的百分比设定。之前用inline-block或固定高度没成功，其实是因为这些方案没法自动让兄弟元素高度同步，而且百分比高度的生效有前提条件，我给你两个靠谱的现代布局方案：

方案1：Flexbox（最推荐，兼容性好） #

Flexbox天生就能让子元素在交叉轴（这里是纵向）上自动拉伸，完美解决高度同步问题，而且代码简洁。

HTML结构 #

<div class="parent-container">
  <div class="box box1">Box1</div>
  <div class="box box2">Box2<br>我是高度由父元素百分比决定的盒子<br>内容可能有多行</div>
  <div class="box box3">Box3</div>
</div>

CSS代码 #

/* 确保祖先元素有明确高度，这样父容器的百分比高度才会生效 */
html, body {
  height: 100%;
  margin: 0;
}

.parent-container {
  display: flex; /* 开启Flex布局 */
  height: 80%; /* 父元素高度设为你需要的百分比，这里是视口高度的80% */
  border: 2px solid #ccc;
  gap: 10px; /* 盒子之间的间距，可选 */
  padding: 10px;
}

.box {
  padding: 10px;
  border: 1px solid #333;
}

.box2 {
  /* 这里不用额外设height:100%，Flex子项默认会拉伸填满父容器的高度 */
  flex: 1; /* 让Box2占据剩余空间，可选，根据你的布局需求调整宽度 */
}

.box1, .box3 {
  width: 100px; /* 给Box1/3设固定宽度，按需调整 */
}

为什么这个方案有效？
Flex容器的align-items默认值是stretch，所有子元素会自动拉伸到和容器内最高的元素（也就是Box2）一样高，而且父容器的百分比高度只要有明确的祖先高度（比如html/body的100%）就能正常生效。

方案2：Grid布局（更适合复杂布局场景） #

如果你需要更灵活的网格布局，Grid也能轻松实现这个效果：

CSS代码（HTML结构和上面一致） #

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

.parent-container {
  display: grid;
  grid-template-columns: 100px 1fr 100px; /* 三列宽度：Box1固定100px，Box2占剩余，Box3固定100px */
  height: 80%;
  border: 2px solid #ccc;
  gap: 10px;
  padding: 10px;
}

.box {
  padding: 10px;
  border: 1px solid #333;
}

原理：Grid布局中，同一行的网格项默认高度会自动匹配，所以Box1和Box3会自动和Box2的高度保持一致，同时父容器的百分比高度只要满足祖先高度条件就能生效。

为什么你之前的方案没成功？ #

• 用inline-block时，元素高度默认由内容决定，而且inline-block不会自动让兄弟元素高度同步，除非手动给所有盒子设置相同的百分比高度，但这需要父容器有明确高度，还得处理inline-block的间隙问题，非常麻烦。
• 固定高度的话，肯定没法跟随Box2的百分比高度动态变化，一旦父容器高度改变，固定高度就会失效。

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