如何让两个左浮动div占满父元素的100%高度？

我明白你折腾这个问题好几个星期有多沮丧——这种基础布局需求看起来应该很简单，但有时候CSS的规则就是有点反直觉。咱们先拆解你现有代码里的问题，再给出几种可靠的解决方案。

你的代码里的核心问题 #

1. 百分比高度的依赖链断裂：你给.feedback设置了height:100%，但它的父元素（body和html）没有设置明确的高度，CSS里的百分比高度需要父元素有一个确定的高度值才能生效，否则这个100%会被解析为auto，也就是由内容撑开的高度。
2. 属性冲突：你同时给.feedback-column设置了float:left和display:table-cell，这两个属性是互斥的——float会强制把元素的display重置为block，所以table-cell完全没起作用。

可行的解决方案 #

方案1：用Flexbox（推荐，现代布局首选） #

Flexbox天生就是用来解决这种等高列布局的，你之前尝试过但可能没用到正确的写法。只需要调整父元素的样式，去掉子元素的float，就能轻松实现等高：

修改后的CSS：

/* 先补全html和body的高度，确保父元素的100%高度生效（如果需要占满视口高度的话） */
html, body {
  height: 100%;
  margin: 0; /* 去掉默认边距 */
}

.feedback {
  display: flex; /* 核心：启用flex布局 */
  height: 100%; /* 如果需要占满视口高度，否则可以去掉，由内容撑开 */
  background-color: #333333;
}

.feedback-column {
  flex: 1; /* 让两个子元素平分可用宽度 */
  /* 去掉float和display:table-cell */
}

#column1 {
  background-color: #999999;
}

#column2 {
  background-color: #cccccc;
}

这样不管两个列的内容多少，它们都会自动撑满父元素的高度，同时平分宽度。如果不需要父元素占满整个视口，只需要去掉html, body和.feedback的height:100%，父元素会自动适应最高列的高度，两个子元素依然保持等高。

方案2：用CSS Grid（更简洁的现代布局） #

Grid布局同样能轻松实现这个需求，写法更简洁：

CSS代码：

html, body {
  height: 100%;
  margin: 0;
}

.feedback {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列平分宽度 */
  height: 100%;
  background-color: #333333;
}

.feedback-column {
  /* 不需要额外属性，Grid会自动让子元素占满行高 */
}

#column1 {
  background-color: #999999;
}

#column2 {
  background-color: #cccccc;
}

方案3：如果一定要用Float（不推荐，仅兼容旧浏览器） #

如果你因为某些原因必须用float，那需要修复高度依赖链，同时用“clearfix”来确保父元素包裹住浮动子元素，再让子元素高度继承：

CSS代码：

html, body {
  height: 100%;
  margin: 0;
}

.feedback {
  height: 100%;
  background-color: #333333;
  overflow: hidden; /* 用overflow:hidden实现clearfix，包裹浮动元素 */
}

.feedback-column {
  height: 100%;
  width: 50%;
  float: left;
  /* 去掉display:table-cell */
}

#column1 {
  background-color: #999999;
}

#column2 {
  background-color: #cccccc;
}

注意：这个方案只有在父元素有固定高度（或者像这里一样依赖视口高度的100%）时才有效，如果父元素是由内容撑开的动态高度，float方案无法让较矮的子元素自动撑满高度——这也是为什么现代布局更推荐Flexbox或Grid的原因。

关于你的疑问：这种布局现在完全支持吗？ #

当然支持！Flexbox和Grid已经被所有现代浏览器支持多年了（包括IE11对Flexbox的部分支持），是当前实现等高列布局的标准方案。你的问题只是之前没有用对正确的属性组合而已。

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