如何让弹性高度的payslip-column-container内子div高度设为100%？

嘿，这个场景我太熟悉了！原来的固定height设置在父容器是弹性高度（比如高度随内容动态变化）时确实不起作用，因为height:100%需要父元素有明确的高度基准才行。给你两个简单靠谱的方案：

方案1：使用Flexbox（推荐） #

直接把父容器改成弹性容器，利用Flexbox的默认拉伸特性就能搞定：

修改后的CSS： #

.payslip-column-container {
  display: flex;
  /* 可选：如果想让子列之间有间距，添加gap */
  gap: 15px;
}

.payslip-column {
  /* 可选：添加flex:1让三个子列宽度均分，否则宽度由内容决定 */
  flex: 1;
  /* 原来的height:100%可以去掉，Flex默认会让子元素拉伸填满父容器高度 */
}

原理很简单：Flex容器的align-items属性默认值是stretch，这会让所有flex子元素沿着垂直方向（交叉轴）自动拉伸，填满父容器的高度——不管父容器是固定高度还是弹性高度（比如由内部内容撑起来），这个特性都有效。

方案2：使用Grid布局 #

如果你更习惯Grid，也能轻松实现：

修改后的CSS： #

.payslip-column-container {
  display: grid;
  /* 三列宽度均分 */
  grid-template-columns: repeat(3, 1fr);
  /* 可选：子列间距 */
  gap: 15px;
}

.payslip-column {
  /* 无需设置height:100%，Grid会自动让子元素填充行高 */
}

Grid布局下，子元素默认会填满所在网格行的高度，同样不需要依赖父元素的固定height。

你可以根据自己的布局需求选其中一个方案，亲测在弹性高度的父容器下，三个子div都会完美占满父容器的高度~

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