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

Question

我试图在 display:table-cell div 中放置一个 100% 高度的 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>

Answer 1

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

我最终只使用了一点 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 可以在所有元素(包括图像)加载之前执行