Firefox下CSS表格布局滚动区域失效 求最简修复方案

我之前也碰到过Firefox这个恼人的百分比高度兼容性问题，给你一个零侵入式的最简修复方案，只需要修改两行CSS，完全不用动HTML结构或者写JS计算高度：

核心修复思路 #

Firefox对表格单元格内的百分比高度计算逻辑和Chrome等浏览器不同，它不会自动将单元格的可用高度传递给子元素。改用flex布局可以让滚动容器自动填充单元格的剩余空间，完美解决这个问题。

修改后的CSS代码 #

body, html{ margin: 0px; padding: 0px; height: 100%; width: 100%; }
body{ position: static; }
.container { height: 100%; max-width: 800px; margin-left: auto; margin-right: auto; }
.theTable{ width: 100%; height: 100%; }
.topSection{ height: 1px; border: 1px solid #CCCCCC; border-radius: 5px; background-color: #F3F3F3; vertical-align: top; }
.midSection{ 
  border: 1px solid #CCCCCC; 
  border-radius: 5px; 
  background-color: #F3F3F3; 
  vertical-align: top; 
  padding: 5px; 
  display: flex; /* 新增：把单元格变成flex容器 */
  height: 100%; /* 确保单元格占满表格剩余高度 */
}
.scrollContainer{ 
  flex: 1; /* 替换原来的height:100%：自动填充容器剩余空间 */
  overflow-y: auto; 
}
.bottomSection{ height: 1px; border: 1px solid #CCCCCC; border-radius: 5px; background-color: #F3F3F3; vertical-align: top; }

为什么这个方案有效？ #

• 给.midSection设置display: flex后，它的子元素.scrollContainer可以通过flex:1自动填充单元格的所有可用高度，这个逻辑在所有现代浏览器（包括Firefox）中都能一致工作。
• 完全保留了你原有的表格布局结构，没有大规模改动的风险，适合嵌入大型项目中。

完整的可运行代码 #

<div class=container>
 <table class=theTable cellspacing=5 cellpadding=2>
 <tr>
 <td class="topSection">
 <div>n items of unknow height (no scroll)</div>
 </td>
 </tr>
 <tr>
 <td class=midSection>
 <div class=scrollContainer>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 <div>Item n of x</div>
 </div>
 </td>
 </tr>
 <tr>
 <td class=bottomSection>
 <div>n items of unknow height (no scroll)</div>
 </td>
 </tr>
 </table>
 </div>

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