You probably tried at one point to make a 100% height layout and you also probably had the bad surprise to see that it didn’t work as you expected. It’s working in IE but not in Firefox…or vice-versa. So what’s the solution?
I don’t know it’s there’s The solution, but there’s at least one, and here’s what I do when I have that problem. I actually write it here because everytime I need it, I completely forget what I did before. At least now, I’ll just have to come back to my own website;)
The problem
Let’s say you have an html file like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>100% height page</title>
</head>
<body>
<div id="wrap">
<h1>100% height in every browser</h1>
<p>This is an example of 100% height page.</p>
</div>
</body>
</html>
And a css file that looks like that:
body{
margin:0;
padding:0;
}
div#wrap{
height:100%;
background:#ccc;
width:850px;
}
In that example, you will see that the content in my #wrap div doesn’t strech to the height of the page, and even if you set the height to 100%.
The problem is that you’re telling #wrap to be 100% of the content it’s in. So basically 100% of the body.
The solution
So let’s change the body and see what happens:
body{
margin:0;
padding:0;
height:100%;
}
div#wrap{
height:100%;
background:#ccc;
width:850px;
}
Here, it’s exactly the same problem than before. So let’s fix that, this time telling the parent box to be 100% also: html.
html,body{
margin:0;
padding:0;
height:100%;
}
div#wrap{
height:100%;
background:#ccc;
width:850px;
}
Still doesn’t work. Seems that the solution is to set the min-height to 100% to fix the minimum height to 100%. Works in Firefow but Internet Explorer doesn’t understand that.
So here’s the trick:
html,body{
margin:0;
padding:0;
height:100%;
}
body{
background:#ccc;
}
div#wrap{
min-height:100%;//ignored by IE
height:auto!important;// for Firefox/Safari/....
height:100%;
background:#ccc;
width:850px;
}
