Menu
I'm trying to use css property height 100% in order for a div taking all available space in the browser. I can make it work with Chrome and Firefox but not with IE8. Actually I understand that in IE8 height 100% means 100% of the size of the immediate parent unlike in Firefox or Chrome where it means 100% of the available space.
I came up with this sample http://jsfiddle.net/GdqjK/
html, body {
margin: 0; padding: 0;
bottom:0px;
height:100%;
}
.grid {
display : table;
width:100%;
}
.tablerow {
display : table-row;
}
.tablecell {
display : table-cell;
}
.grow {
bottom:0px;
height:100%;
}
<div class="grid grow">
<div class="tablerow">
<div class="tablecell">
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</div>
</div>
<div class="tablerow grow">
<div class="tablecell grow" style="border: solid 3px">
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</div>
</div>
</div>
You can see that running it with IE8 , the second row is much bigger. Is there any workaround without using fixed height? I would like to keep the same behavior of the div taking all the available space. If there is no solution to make it works with IE8 what would be the best degraded solution (maybe with conditional css for IE8). Thank you very much for your help.
561
This one works for IE8+
http://jsfiddle.net/DNEb3/2/
<div class="grid">
<div class="tablerow">
<div class="tablecell" style="border: solid 3px">
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</div>
</div>
<div class="tablerow grow">
<div class="tablecell" style="border: solid 3px">
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</div>
</div>
</div>
</body></html>
html, body {
margin: 0; padding: 0;
bottom:0px;
height:100%;
}
.grid {
display : table;
width:100%;
height: 100%
}
.tablerow {
display : table-row;
}
.tablecell {
display : table-cell;
}
.grow {
bottom:0px;
height:100%;
}
81
100% height can be accomplished using tables.
Just make sure that your <html> and <body> are both of 100% height as well.
Full working example:
<!doctype html>
<html style='height:100%;'>
<body style='margin:0; height:100%;'> <!-- margin:0 is optional -->
<table style='background:green; height:100%;'>
<tr>
<td>Content</td>
</tr>
</table>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
