CSS 中实现子元素百分比高度与父容器等高的传统方案详解-html教程-PHP中文网

在不使用 Flexbox 的前提下，让浮动布局中后一个子元素（.child2）严格匹配父容器高度的关键在于：父元素需获得正确高度（通过 BFC 触发），而子元素需脱离文档流并利用 top: 0; bottom: 0 拉伸填充——这是 CSS 定位机制对百分比高度限制的可靠绕过方式。

在不使用 flexbox 的前提下，让浮动布局中后一个子元素（`.child2`）严格匹配父容器高度的关键在于：父元素需获得正确高度（通过 bfc 触发），而子元素需脱离文档流并利用 `top: 0; bottom: 0` 拉伸填充——这是 css 定位机制对百分比高度限制的可靠绕过方式。

在标准 CSS 布局中，百分比高度（height: 100%）生效的前提是：父元素具有明确的高度值（非 auto）。而浮动子元素会导致父容器发生高度塌陷（height: 0），此时即使设置 height: 100%，子元素也无“参照基准”，自然无法拉伸。

你最初尝试的 display: flow-root 确实能创建新的块级格式化上下文（BFC），从而让 .parent 正确包裹浮动的 .child（即撑开高度），但问题在于：.child2 仍处于文档流中且未脱离浮动影响，其 height: 100% 依然无效——因为此时父容器虽有了高度，但 .child2 的 height: 100% 在浮动上下文中仍受制于自身内容高度和计算逻辑，而非父容器可视高度。

✅ 正确解法（无 Flexbox）：结合 BFC + 绝对定位

核心思路分两步：

确保父容器拥有真实高度：用 display: flow-root（或 overflow: hidden、::after 清除浮动等）触发 BFC；
让目标子元素脱离文档流并强制拉伸：对 .child2 应用 position: absolute，并设置 top: 0; bottom: 0; right: 0，使其上下边界锚定父容器，从而无视内容高度，完全填充可用垂直空间。

以下是可直接运行的完整代码示例：

.parent {
  position: relative; /* 为绝对定位提供定位上下文 */
  display: flow-root; /* 触发 BFC，防止浮动塌陷 */
  background-color: aqua;
  padding: 8px; /* 可选：增加视觉呼吸感 */
}

.child {
  background: lime;
  margin-right: 12px; /* 避免与 .child2 重叠（因 .child2 是绝对定位） */
}

.child2 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: blue;
  width: max-content; /* 保持内容宽度，避免过度拉伸 */
}

<div class="parent">
  <div class="child">
    <p>abcd</p>
    <p>efg</p>
    <p>hij</p>
  </div>
  <div class="child2">
    <p>abcd</p>
  </div>
</div>

⚠️ 注意事项：

position: relative 必须加在 .parent 上，否则 absolute 子元素将相对于最近的已定位祖先（可能是）定位，导致错位；
.child2 脱离文档流后，.child 不再需要 float —— 实际上建议移除 float: left，改用 display: inline-block 或纯静态流布局，以简化维护；
此方案要求 .child 的内容高度 ≥ .child2 的原始高度（即父容器高度由 .child 决定），否则 .child2 会拉伸至父容器高度，但 .child 反而可能显得“矮”——这正是你原始需求中“第一个 div 拉伸父容器，第二个跟随该高度”的准确体现；
若需响应式适配，可配合 min-height 或媒体查询增强鲁棒性。

? 总结：在 Flexbox 普及前，position: absolute + top/bottom 是解决“等高列”最经典、兼容性极佳（IE7+）的技术方案。它不依赖现代布局模块，而是深度利用 CSS 定位与 BFC 的底层机制，是理解 CSS 盒模型与渲染原理的重要实践案例。