100%高度分区内显示:表格单元分区

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?

我试着把一个100%高度的div放在一个显示中:table-cell div，但是它似乎在IE中不起作用。如有什么解决方法吗?

Here's my code:

这是我的代码:

<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>

2 个解决方案

#1

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

我知道这是一个相当古老的帖子，但是我发现我在这里寻找一个解决方案。

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

最后我只使用了一点jQuery。('。列'指的是my:table-cell元素)

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

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.

这将强制一个显式的高度等于流动的高度，从而使.column中100%的高度实际上适合整个宽度。

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

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

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.

修订:如果您正在表单元格元素中加载图像，这会影响高度，那么您将希望在jQuery(窗口).load()上运行上述代码。Chrome在document.ready时存在图像尺寸问题。移动上面的代码。load修正了这个问题。

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

.load是在所有元素加载vs .ready后调用的，可以在加载所有元素(包括图像)之前执行。

2 个解决方案

#1

更多相关文章

随机推荐