4

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>
user1304988
  • 232
  • 4
  • 7

2 Answers2

2

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

user2199786
  • 21
  • 3
1

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>
AliRıza Adıyahşi
  • 15,658
  • 24
  • 115
  • 197
  • In the full code I have other fixed height table-rows and I need this table row to take the rest of the table height, so I can't put a fixed height. – user1304988 Mar 31 '12 at 13:05
  • I'm sorry, I can't seem to get it workin. I tried searching for answer too, but lots of people seem to have this problem. – GolezTrol Nov 14 '12 at 10:20