显示内 100% 高度的 div：table-cell div

我试图将 100% 高度的 div 放入 display:table-cell div 中，但它似乎在 IE 中不起作用。 IE 有什么解决办法吗？

这是我的代码：

<div style="display:table-row;">
   <div style="display:table-cell; background-color:blue; border-left:solid 1px #CCC;">
       <div style="position:relative; height:100%; width:100%; background-color:red;">
       </div>
   </div>
</div>

我意识到这是一篇相当旧的帖子，但是我发现自己在这里寻找解决方案。

我最终使用了一点 jQuery。 （“.column”指的是我的：table-cell 元素）

jQuery(document).ready(function($){
    $('.column').each(function(){
        var $this = $( this )
        $this.height( $this.height() );
    });
});

这会强制显式高度等于流动高度，从而导致 .column 内具有 100% 高度的元素实际上适合整个宽度。

适用于当前版本的 Firefox、Chrome 和 IE 9。

修订：如果您在表格单元格元素中加载图像，这会影响高度，那么您将需要在 jQuery(window).load() 上运行上述代码。 Chrome 在 document.ready 中遇到图像尺寸问题。 移动上面的代码 .load 解决了这个问题。

.load 在所有元素加载后调用，而 .ready 可以在所有元素（包括图像）加载之前执行