100% height div inside a display:table-cell div

问题:

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?

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>

回答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(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.

Works in current versions of Firefox ,Chrome and 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.

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

回答2:

parent divs height and width are set auto. if you want to see red div , you initialize your parent divs height and width.

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