如何让显示表格单元格在 IE 中拉伸到表格的剩余高度答案

【问题标题】：How to get display table cell to stretch to remaining height of table in IE如何让显示表格单元格在 IE 中拉伸到表格的剩余高度
【发布时间】：2013-10-01 07:53:51
【问题描述】：

回到过去使用表格进行布局的美好时光，我们可以这样做：

<div style="height: 400px;">
<table style="height: 100%">
    <tr>
        <td>This cell sizes to its content</td>
    </tr>
    <tr>
        <td height="100%">This cell takes up the remaining height.
    </tr>
    <tr>
        <td>This cell sizes to its content</td>
    </tr>
</table>
</div>

现在，我正在尝试使用display: table 和display: table-cell 来实现相同的目标。这是我的尝试：

http://jsfiddle.net/p3jwr/6/

它在 FF 和 Chrome 中呈现良好。表格应该在 400px 内构建，第 1 行和第 3 行各占 100px，第 2 行填充剩余空间，计算结果为 200px。

在 IE9 中（这是我需要支持的最低 IE），第二行扩展为 400 像素，这是 表的父表大小的 100%。这会将表本身扩展到其父表的 100% 以上。

这里的目标是让表格伸展以填充其父级，其大小未知，但肯定会设置，并让中间行伸展以占用第一个或未使用的空间第三行。

任何人都可以为 IE 提出一个解决方法吗？它甚至不必在其他浏览器中工作，但我希望坚持使用 display: table。

【问题讨论】：

标签： html css internet-explorer html-table

【解决方案1】：

希望这会有所帮助：

div > table {
        height : auto !important;  
        height : 100%;            
        min-height : 100%;        
    }

它适用于大多数浏览器。检查一下！

【讨论】：

谢谢，但这并没有达到预期的效果。我将该规则中的属性添加到我的表格样式 div 的样式属性中。结果看起来和我原来的例子一样（但现在在 FF 或 Chrome 中也不起作用）。 jsfiddle.net/p3jwr/7

【解决方案2】：

试试这个代码，

<div style="height: 400px;">
   <table style="height: 100%">
         <tr style="height: 25%">
               <td>This cell sizes to its content</td>
         </tr>
         <tr style="height: 50%">
               <td>This cell takes up the remaining height.
         </tr>
         <tr style="height: 25%">
               <td>This cell sizes to its content</td>
         </tr>
   </table>
 </div>

基于以下假设， 400 像素的 25% = 100 像素 400 像素的 50% = 200 像素

【讨论】：