CODEWITHSUNDEEP
htmlcss
TCD Factory
TCD Factory

Reputation: 2524

Why does 100% height work inside a display:table-row on Chrome & FF but not in IE9?

I have a little dilemma. I could work around this issue, but it would be a pain to do so and still limit things in sense of how a site layout could work. Basically I've been using the following method to give myself a sticky footer that is actually height variable:

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

Example:

The CSS:

html, body {height:100%; width:100%; margin:0;}
.wrapper {display:table; width:100%;}
html>body .wrapper {height:100%;}
.wrapperRow {display:table-row;}
.wrapperRow.wrapperExpand {height:100%;}
.this-wont-expand-to-100-percent-in-IE {height:100%;}

The HTML:

<body>
<div class="wrapper">

<div class="wrapperRow">This is the header</div>

<div class="wrapperRow wrapperExpand">
<div class="this-wont-expand-to-100-percent-in-IE">
This is the content
</div>
</div>

<div class="wrapperRow">This is the footer</div>

</div>
</body>

CodePen: http://cdpn.io/ILisk

THE PROBLEM:

Well, the problem is this works just fine in Chrome and Firefox... however it does NOT work in IE 9 or lower (not sure if it does in IE 10). The 'wrapperRow wrapperExpand' div does have it's height set to an absolute height of 100%, which is the parent of the 'this-wont-expand-to-100-percent-in-IE' and that is also set to 100%. I don't understand why this doesn't work. Does anyone have a solution or work around to make that inner child div (the 'this-wont-expand-to-100-percent-in-IE' one) match the height of it's parent? (the 'wrapperRow wrapperExpand' one)

I'm starting to think that it's just not possible in IE... at least not without using java-script perhaps... unfortunately I'm really not that familiar with that. Any ideas?

Upvotes: 1

Views: 8550

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99474

Web browsers often tries to fix your bad-coding, but only smarter ones will succeed!

When you use table display type such as table, table-row for some elements, It's supposed to use table-cell for inner elements too. That's what you've forgot:

.this-will-expand-to-100-percent-in-IE {
  display: table-cell;
  height:100%;
}

Here is the CodePen Demo.

By the way, in this case, I'd prefer to use Ryan Fait's Sticky footer (instead of using a CSS table layout). You could also find a snippet on CSS-Tricks.

Upvotes: 1

Related Questions