显示内部的100％height div：table-cell div [英] 100% height div inside a display:table-cell div

问题描述

我试图把一个100％的高度div在显示：table-cell div，但它似乎并不工作在IE。 IE的任何解决方法？

I'm trying to put a 100% height div inside a display:table-cell div, but it doesn't seem to work in IE. Any workaround for 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>

推荐答案

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

I realize this is a fairly old post, however I found myself here looking for a solution.

我最终使用了一点，但是jQuery。 （'.column'是指my：table-cell元素）

I ended up using a little but of jQuery. ('.column' refers to my :table-cell elements)

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

这迫使显式高度等于流动的高度，导致我的元素在.column内有100％的高度

This forces an explicit height equal to the flowed height causing my elements with 100% height within the .column to actually fit the full width.

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

Works in current versions of Firefox ,Chrome and IE 9.

修订版：如果你在table-cell元素中加载会影响高度的图像，那么你将需要在jQuery（window）.load（）上运行上面的代码。
Chrome在document.ready的图片尺寸有问题。
移动上面的代码.load解决了这个问题。

Revision: If you are loading images within the table-cell elements which will effect the height then you will want to run the above code on jQuery(window).load() instead. Chrome has issues with image dimensions at document.ready. Moving the the above code .load fixed the issue.

.load在所有元素加载后调用vs .ready可以在所有元素图片）已加载

.load is called after all elements have loaded vs .ready which can execute before all elements (including images) are loaded

这篇关于显示内部的100％height div：table-cell div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！