如何让子div高度扩展至父div高度（非绝对定位实现）

嘿，我来分享几个项目里常用的、不用绝对定位就能实现子元素和已知高度父元素同高的实用方案，都是经过实践验证的：

方法1：Flexbox布局（首推） #

这是目前最简洁且兼容性良好的方案，现代浏览器都完美支持。只需要给父元素设置display: flex，子元素会自动拉伸填充父元素的高度，完全不用额外设置子元素的height属性。

代码示例：

<div class="parent">
  <div class="child">我是子元素，高度和父元素完全一致</div>
</div>

.parent {
  height: 300px; /* 已知的父元素高度 */
  display: flex;
  border: 2px solid #ccc;
}

.child {
  width: 200px;
  background-color: #f0f0f0;
  /* 无需手动设置height，自动继承父元素高度 */
}

优点：代码极简，自适应能力强，支持多个子元素共存，还能轻松通过align-items控制子元素的垂直对齐方式。

方法2：Grid布局 #

和Flexbox类似，Grid布局也能让子元素自动填充父元素的高度，尤其适合需要同时控制行列的复杂二维布局场景。

代码示例：

.parent {
  height: 300px;
  display: grid;
  border: 2px solid #ccc;
}

.child {
  width: 200px;
  background-color: #f0f0f0;
}

优点：适合多维度布局需求，同样无需手动设置子元素高度，布局灵活性拉满。

方法3：Table/Table-Cell布局（兼容性拉满） #

如果你的项目需要兼容非常老旧的浏览器（比如IE8及以下），这个方案绝对靠谱。利用表格单元格自动填充父容器高度的特性：

代码示例：

.parent {
  height: 300px;
  display: table;
  width: 100%; /* 表格需要明确宽度才能正常渲染 */
  border: 2px solid #ccc;
}

.child {
  display: table-cell;
  width: 200px;
  background-color: #f0f0f0;
}

注意：父元素必须设置width，否则可能出现布局异常。

方法4：使用height: 100% #

这个方法需要注意层级关系，因为height: 100%是基于父元素的高度计算的。好在你已经明确父元素高度已知，所以直接给子元素设置height: 100%即可，建议搭配box-sizing: border-box避免padding或border撑大高度：

代码示例：

.parent {
  height: 300px;
  border: 2px solid #ccc;
}

.child {
  height: 100%;
  width: 200px;
  background-color: #f0f0f0;
  box-sizing: border-box; /* 确保padding/border不会超出父元素高度 */
  padding: 20px; /* 示例padding，不会影响高度匹配 */
}

注意：如果父元素的上层容器也设置了高度，可能需要逐层设置height: 100%，但你的场景里父元素高度已知，所以不用考虑这个问题。

以上几种方法都能完美实现需求，你可以根据项目的兼容性要求和布局复杂度来选择～

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