CSS百分比高度问题：如何让浮动子元素与父元素等高（非Flex方案）

问题回顾 #

父元素包含两个浮动子元素，第一个子元素因内容更多撑开父元素高度；给父元素设置display: flow-root清除浮动后，父元素高度恢复正常，但右侧子元素设置height:100%后，高度并未跟随父元素增长。

为什么height:100%不生效？ #

CSS中height:100%的生效前提是父元素必须有明确的高度值（比如固定像素值、可向上追溯到明确高度的百分比值）。此处父元素的高度是由第一个子元素内容“自适应”撑开的隐式高度，并非显式定义的高度基准，因此右侧浮动子元素的height:100%没有可参考的高度值，自然无法生效。

非Flex解决方案 #

方案1：相对定位+绝对定位 #

通过绝对定位让右侧子元素贴合父元素上下边缘，自动跟随父元素高度：

.parent {
  display: flow-root;
  background-color: aqua;
  position: relative; /* 父元素设为相对定位，作为绝对定位的基准 */
}

.child {
  float: left;
  background: lime;
}

.child2 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: blue;
}

方案2：表格布局 #

利用表格单元格默认等高的特性实现需求：

.parent {
  display: table;
  width: 100%; /* 表格需设置宽度占满容器 */
  background-color: aqua;
}

.child {
  display: table-cell;
  background: lime;
}

.child2 {
  display: table-cell;
  background: blue;
  width: 1%; /* 让右侧单元格宽度由内容决定，模拟浮动效果 */
  white-space: nowrap; /* 防止内容换行 */
}

方案3：浮动+负margin（兼容旧浏览器） #

通过超大负margin和padding让右侧子元素视觉上撑满父元素，配合父元素overflow:hidden裁剪超出部分：

.parent {
  overflow: hidden; /* 替代flow-root清除浮动 */
  background-color: aqua;
}

.child {
  float: left;
  background: lime;
}

.child2 {
  float: right;
  background: blue;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

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