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

Question

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

<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: tableand来实现相同的目标display: table-cell。这是我的尝试：

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

它在 FF 和 Chrome 中呈现良好。在表格应该构建的 400 像素中，第一行和第三行各占 100 像素，第二行填充剩余空间，达到 200 像素。

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

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

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

Answer 1

希望这可以帮助：

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

它适用于大多数浏览器。核实！

Answer 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>

使用以下假设，400px 的 25% = 100px 400px 的 50% = 200px