100% height <div> inside a fullpage div (top:0, bottom:0)

Question

Problem is simple.

I want a full height div (#inner) inside another full height div (#outer, but with paddings).

This code is rendered correctly in firefox and IE8 but not in IE7 and IE6.

Edit: In the context I use this structure, I forced to set postition:absoulte for #outer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<style>
#outer {
 position: absolute;
 top:0;
 bottom:0;
 right:0;
 left:0; 
 padding: 50px;
 background-color: #FEE;
 height:auto;
}
#inner {
 height:100%;
 background-color: #FDD;
}
</style>
<div id="outer">
 <div id="inner"></div>
</div>

</body></html>

Edit: In the context I use this structure, I forced to set postition:absoulte for #outer. — Taha Jahangir

Anantha Sharma Anantha Sharma · Accepted Answer · 2011-08-02T10:36:04

this is a bug in IE6 & IE7.. you need to set the outer div with fixed height for the inner div to behave properly.

change your CSS to something like this

<style>
#outer {
 position: absolute;
 top:0;
 bottom:0;
 right:0;
 left:0; 
 padding: 50px;
 background-color: #FEE;
 height:140px; /* notice the height is in pixels not % */
}
#inner {
 height:100%;
 background-color: #FDD;
}

things would start to work.. you can use javascript to identify the browser & apply the css accordingly.

100% height <div> inside a fullpage div (top:0, bottom:0)

3 Answers