IE mapping: child of table table ignores height: 100%

Question

I need to dynamically build a table to store some data.
I followed the usual approach of using divs with display: table , display: table-row and display: table-cell :

 .tab { display: table; height:100%; width: 200px; } .row { height: 100%; display: table-row; } .elem { border: 1px solid black; vertical-align: top; display: table-cell; height:100%; background: blue; } .content { height: 100%; background: greenyellow; } 

 <div class="tab"> <div class="row"> <div class="elem"> <div class="content"> Content </div> </div> <div class="elem"> <div class="content"> Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus </div> </div> </div> </div> 

Or view the Jsfiddle.

In most browsers, I get the expected output:

However, in IE8 (and possibly in later versions I have not tested later versions), I get the following:

height: 100% set to the div surrounding the "Content" is ignored.

According to CanIUse , IE8 should offer full support for relevant display properties.

I looked at a number of similar questions on SO without finding a working solution: most solutions rely on Javascript (which I try to avoid), use fixed height (ibid previous), or do not work on IE8.

Answer 1

Unfortunately, the influence of percentage values ​​for height on the display: table-row and display: table-cell elements is undefined according to the specification :

CSS 2.1 does not determine how the height of table cells and table rows is calculated when their height is specified using percentage values.

Thus, although the browser may declare full support for the layout of the table, some aspects, such as the percentage height, may not be executed sequentially in all browsers because there is no proper behavior. You can try to raise a question in Microsoft Connect in the hope that they will change the behavior to be compatible, but at the same time you will need to find another workaround (and even then you cannot guarantee that the behavior will remain compatible, even in other browsers )

To make matters worse, I just tested and it affects all versions of IE prior to 11, including 11, which means that IE-specific hacking will be missing here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a workaround with pure CSS is probably not feasible.

Answer 2

For Internet Explorer 8-10 table-cells with height: 100%; need to wrap table-row with height: 100%; .

Html for IE should look like this:

 table > table-row > table-cell 

While other browsers will work correctly with

 table > table-row or table > table-cell 

[edit] I looked at the question again and noticed that you want to set 100% height not for the cells of the table, but for the content inside it.

decision 1 . Thus, for the height of the content, Internet Explorer is associated with the nearest element with a height set in absolute units, for example, pixels, em, if you want to use% height, you may also need to set the height to 100% for all parent elements, this will be html and body. working example

solution 2 : just add

 .content { padding-bottom: 9999px; margin-bottom: -9999px; } .elem { overflow: hidden; } 

You do not need to set the height in any of the parent elements in this case. working example .

Hope this helps.