显示器内的 100% 高度 div：表格单元格 div答案

【问题标题】：100% height div inside a display:table-cell div显示器内的 100% 高度 div：表格单元格 div
【发布时间】：2012-04-14 21:34:13
【问题描述】：

我正在尝试将 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>

【问题讨论】：

在 div 中添加任何内容。或定义最小高度。

标签： css internet-explorer html height css-tables

【解决方案1】：

父 div 的高度和宽度设置为自动。如果你想看到红色的 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>

【讨论】：

在完整的代码中，我还有其他固定高度的表格行，我需要这个表格行来占据表格的其余高度，所以我不能放置一个固定的高度。
对不起，我似乎无法正常工作。我也试过寻找答案，但似乎很多人都有这个问题。

【解决方案2】：

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

我最终使用了一点 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 在所有元素加载后调用，而 .ready 可以在所有元素（包括图像）加载之前执行

【讨论】：