Creating a Full-Height Web Page Layout
A common issue that comes up when creating web pages is what happens when the content on a page is smaller than the screen height. For example, take a look at the following simple layout:
We can see that the content is not large enough to fill the screen, leaving a gap below the footer. While this is functional, it's not particularly attractive. Ideally, even when there's very little content on a page, it would be nice if the page were at least as large as the viewport, so the footer would be at the bottom of the screen. Fortunately, this is relatively simple to accomplish.
Setting the Layout Height
Although it's common to use the width, min-width, and max-width properties in layouts, it's less common to use the height, min-height, and max-height properties. It makes sense, since most of the time in our layouts, we want to have the height property left at its default auto value so the element is sized to whatever content it contains. Sometimes, though, that can backfire on us, leaving us with some unsightly gaps such as the one in the example above.
The first step is to add the min-height property to the wrapper container:
The min-height property prevents the element from becoming any shorter than the property’s value. Because we can't know the viewport's exact size, we use "100%" as the size.
Also note that the box-sizing property has been set to "border-box" instead of the default "content-box" setting. This is a good idea if you decide to do things such as add padding and/or border (but not margin) to the wrapper later, as "border-box" sets the height value to equal the content box height plus padding and border. It just makes things easier, especially with full-height layouts.
Anyway, we're not done yet. Just setting the wrapper's min-height to "100%" won’t do anything. Any time you use the percent unit in layout properties, you're setting that element's property relative to the element's parent property. In this case, we're setting the wrapper to the full height of the BODY element.
The problem is that the BODY's height property is also set to "auto", and thus can't contribute a value for wrapper's min-height to work. We have to give all of the wrapper element's ancestors a height value:
Why do we need to do this? Because we're still using the percent unit for the height value. So the wrapper is at least the full height of the BODY element, which is the full height of the HTML element, which gets its height from the viewport. Once we do that, we begin seeing the fruits of our labor:
It's not quite perfect, but we're making progress!
Now all we have to do is get the footer to the bottom of the page.
Repositioning the Footer
We can get the footer where we want it with a bit of positioning CSS:
First we set the wrapper to be position: relative. This is because when we set an element's positioning to "absolute", its positioning will be anchored to either its closest relatively-positioned ancestor or to the document if no such ancestor is found. So the "pagefooter" element will be anchored to the wrapper element position instead of the document. Otherwise setting the pagefooter's width to 100% would be 100% of the overall document width (the viewport width in this case) instead of 100% of the wrapper's width.
If you would like to learn more about using CSS Styles and HTML, Training Connection offers a three-day HTML/CSS class in our Chicago and Los Angeles locations.
The result is seen here:
Looking much better! One final thing to do is to add padding (not margin) to the bottom of the wrapper equal to the height of the footer so that any content longer than the viewport height doesn't get obscured by the absolutely-positioned footer:
After adding additional paragraphs to the page we see that everything looks ok:
There we have it – a full-height layout that works across all modern (IE 8+) browsers.
Related HTML/CSS Lessons
Onsite HTML/CSS training
Through our network of local trainers we deliver onsite HTML/CSS classes right across the country. Obtain a quote for an onsite HTML/CSS class.
To view a sample of our past students testimonials, please click on the following link: HTML/CSS reviews.