Chrome与Firefox中div元素高度不一致的问题求助

你遇到的这个问题确实是Chrome在版本63之后对表格元素高度计算逻辑调整导致的——之前Chrome和Firefox一样，会让height:100%的子元素继承单元格的高度，但新版Chrome严格遵循了CSS规范中关于百分比高度的要求：百分比高度的元素需要父元素有明确的非百分比高度值，而表格单元格的高度是由内容自动撑开的，属于“隐式高度”，所以div的height:100%不生效。

下面给你几个可行的解决方案：

方案1：使用CSS Grid替代表格布局 #

这是最现代也最可靠的方式，Grid天生支持等高列，不需要依赖表格的特殊渲染逻辑：

<div class="grid-container">
  <div style="background-color: orange"> DIV </div>
  <div style="background-color: aqua"> Line 1<br> Line 2 </div>
  <div style="background-color: #fac"> 10<br> 20<br> 30<br> </div>
  <div style="background-color: #8f5"> DIV </div>
  <div style="background-color: #cb1"> Line 2.1<br> Line 2.2 </div>
  <div style="background-color: #eda"> 10<br> 20<br> 30<br> </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 0; /* 模拟表格的无边框间隙，需要的话可以调整 */
}
.grid-container > div {
  height: 100%; /* Grid会让每个单元格自动等高，div自然占满 */
}

方案2：使用Flexbox改造表格单元格 #

给每个<tr>设置为flex容器，强制单元格等高，同时让div占满空间：

table {
  width: 100%;
  border-collapse: collapse;
}
tr {
  display: flex;
}
td {
  flex: 1;
  min-width: 150px;
  display: flex;
}
td div {
  flex: 1; /* 用flex占满单元格空间，替代height:100% */
}

这种方式保留了表格的语义化，同时解决了Chrome的高度计算问题。

方案3：使用绝对定位兜底 #

如果你必须保留原始表格布局的渲染逻辑，可以用绝对定位让div填充单元格：

td {
  position: relative;
  vertical-align: top;
  min-width: 150px;
}
td div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

注意这种方式需要确保单元格内只有这个div元素，否则会覆盖其他内容。

补充说明 #

Firefox之所以能生效，是因为它对表格元素的百分比高度处理更宽松，允许子元素继承单元格的隐式高度。而Chrome在63版本后严格执行了CSS规范，要求百分比高度的父元素必须有明确的高度值（比如固定像素高度，或者父元素是flex/grid容器）。

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