October 11, 2005
CSS Vertical Stretch
October 11, 2005, 12:24 PM | 58 Comments
Update: Due to Microsoft’s release of IE 7, parts of this article have become outdated. Please be aware that the * html hack for IE 6 causes some issues in IE 7. As an alternative, the best way to apply CSS rules for IE 6 is to use a separate stylesheet that is only read by IE 6 (or lower). Please read my article “Serving Up IE Specific Stylesheets” for more information. To apply the same rules that are listed with a * html hack below, remove the * html portion of the CSS rule and put the rest in your IE 6 stylesheet. If you have any remaining questions, feel free to contact me.
An often asked question that I’ve come across frequently is how to make a page stretch the entire height of the browser window if there is not enough content to make it stretch.
In ‘the olden days’ it was easy to just make a table and give it a 100% width/height to make it take up the entire viewport of the browser. Well, those days are behind us now, so we need to create that same solution using only CSS.
It’s not particularly difficult to accomplish, but there are some intricacies to address when we try to make these techniques compatible with most browsers.
The Out-Dated Method
The old way of doing things was to just create table and give it a height of 100%.
<table width="750" height="100%">
<tr>
<td width="750" height="100%">
<p>Content Here</p>
</td>
</tr>
</table>
The CSS Method
Common thinking would suggest that you’d just have to give the div a 100% height. The problem is that CSS needs to have the parent element’s height defined.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS 100% Height Example</title>
</head>
<body>
<div id="Content">
<p>Content Goes Here</p>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
text-align: center;
}
First, we set the height of the html and body elements to 100%. This will ensure that Firefox/Mozilla/Opera render your Content layer’s height properly. (Remember, CSS requires the parent element’s height attribute to be set, that’s why we have to set the html and body element height). Next, I’ve removed the default margin and padding from the body of the page. Also, I’ve given the body a text-align property of center to create a centered layout.
#Content {
margin: 0 auto;
text-align: left;
width: 750px;
height: 100%;
background: #CCC;
}
I’ve given the content layer a width of 750 pixels and a height of 100% of the viewport. The margin and text align properties are there to complete the centered layout. I’ve also added a background color so that you can see the effect of the 100% height.
Click here to see our example so far.
Centered Splash Page
For the most part, the most useful reason to have a 100% height layer is to center content vertically. This usually happens when creating a splash page, or a centered image.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS 100% Height :: Splash Page</title>
</head>
<body>
<div id="Container">
<div id="Splash">
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
text-align: center;
min-height: 400px; /* For Mozilla/Opera/Safari */
}
#Container {
position: relative;
margin: 0 auto;
text-align: left;
width: 750px;
height: 100%;
}
#Splash {
position: absolute;
width: 750px;
height: 400px;
top: 50%;
margin-top: -200px; /* Half of splash height */
background: #CCC;
}
Click here to see the example.
More than enough content
Going back to our first example, what would happen if there was more than enough content to make the page stretch to 100% height? Well, that really depends on which browser you’re using. If you’re using IE, it should look fine because IE treats height as a minimum height and automatically expands. Firefox/Safari/Opera needs to have the minimum height explicitly set though, otherwise it just treats height as the height. If you’re using Firefox/Safari/Opera, click here to see what our first example would look like with ‘more than enough’ content.
The fix is very simple, but requires one small hack to accomodate for IE. The HTML code is exactly the same, but the CSS adds a few lines of code.
#Content {
...
min-height: 100%;
height: auto;
}
/* Hack for IE */
* html #Content {
height: 100%;
}
/* End IE Hack */
First, I’ve changed ‘height: 100%;’ to ‘min-height: 100%;’ so that the layer will always be a minimum height of 100%. IE ignores the min-height property, so we don’t have to worry about it causing problems. Secondly, I’ve set the height of the layer to ‘auto’ which will cause it to automatically expand if there is more than enough content.
Thirdly, because I set the height to auto, I have to reset the height to 100% for IE.
Click here for the example. (Note: IE users will see no difference).
Notes:
These techniques use some CSS2 properties, which means that older browsers will not fully support these methods. Also, it means that IE5/Mac support is sketchy at best.
Posted in: CSS, CSS Tips, Web Development