Question

我正在尝试在显示器中放置一个100％高度的div：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>

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。

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

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

Answer 2

父div的高度和宽度都设置为auto。如果你想看到红色div，你可以初始化你的父div高度和宽度。

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

        </div>
    </div>
</div>

显示屏内100％高度div：table-cell div

2 个答案: