如何将父元素高度分配给3个子元素？尝试table布局无效

嘿，这个问题我太熟了！你之前用的table布局没生效，大概率是两个原因：要么父元素没设置明确的高度值，要么没遵循table布局的层级规则——毕竟table→table-row→table-cell的嵌套是不能少的。别着急，给你三个靠谱的实现方案，按需选就行：

Flexbox简直是为这种均分空间的场景量身定做的，代码少还灵活。核心思路是让父元素变成flex容器，子元素自动平分剩余空间：

<div class="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.parent {
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
  height: 300px; /* 必须给父元素设置明确高度，比如固定值、百分比或者vh */
  width: 100%;
}

.child {
  flex: 1; /* 每个子元素平分父元素的可用高度 */
  border: 1px solid #ccc; /* 加个边框方便看效果 */
}

只要父元素有明确高度，flex:1会让所有子元素自动均分高度，哪怕子元素内容多少不一样，也不会影响高度分配。

Grid布局更适合复杂的二维布局，但用来做垂直均分也超简单：

.parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr); /* 直接指定3行，每行高度1fr */
  height: 300px;
  width: 100%;
}

.child {
  border: 1px solid #ccc;
}

或者用grid-auto-rows: 1fr，不管子元素有多少个，都会自动均分高度，非常省心。

如果一定要用table布局，得把结构补全，并且给父元素设置明确高度：

<div class="parent">
  <div class="row">
    <div class="cell">子元素1</div>
  </div>
  <div class="row">
    <div class="cell">子元素2</div>
  </div>
  <div class="row">
    <div class="cell">子元素3</div>
  </div>
</div>

.parent {
  display: table;
  height: 300px; /* 必须设置高度 */
  width: 100%;
  border-collapse: collapse; /* 可选，去掉单元格间距 */
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid #ccc;
  vertical-align: top; /* 控制内容垂直对齐方式 */
}

之前没生效的原因可能是你直接给子元素设了table-row但没嵌套table-cell，或者父元素没加高度——table布局的高度是靠父元素的明确高度来分配给row的，没有高度的话会自适应内容。

这三个方案里，Flexbox是日常开发的首选，兼容性覆盖了所有现代浏览器；如果要兼容IE10及以下，修正后的Table布局可以用；Grid则适合需要同时处理行列布局的场景。

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