Create a Page With a Header, Content and Footer That Span 100% Height in the Browser

Surely you have seen pages that span 100% height of your browser’s canvas area, even though the content may be just a line or two. If you are still wondering how to do this, here’s you complete guide, although without the pointers on how to proceed with padding and such other things for the individual components – this is a basic explanation of how you can achieve this. We are going to create a page that has a header on the top, a footer that is always on the bottom and a content in between that will retain background all the way to the footer.

I am going to throw the HTML code in, and then we can start going through CSS piece by piece:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Example of a Page With a Header, Content and Footer That Span 100% Height in the Browser</title>
	<link rel="stylesheet" type="text/css" href="100-percent-height.css" />
</head>
<body>
	<div id="container">
		<div id="content">
			CONTENT
		</div>
		<div id="header">
			HEADER
		</div>
		<div id="footer">
			FOOTER
		</div>
	</div>
</body>
</html>

As you can see, we got our header, content and footer. You probably are wondering why the header is below the footer, and this is where CSS kicks in – in fact, you could do it in the logical order as well, as I will show later on. Well, let’s start: the 100-percent-height.css file is containing all of the CSS rules.

By default, your document’s body grows with the content and it’s height is going to grow accordingly – it will not be the height of the area available for viewing in your browser. Therefore, we must specify that it has to span a 100% height:

html,body
{
	margin: 0;
	padding: 0;
	background: #000020;
	height: 100%;
	text-align: center;
}

I added a zero margin and a zero padding because the default setting will have some of that and I have a background – we don’t want any white borders around. In fact, I consider it a good practice to set margin, padding and borders all to zero on the HTML elements and adjust accordingly to needs of individual ones. As you can see, we have specified that our html and body elements should be 100% of the available area. Another attribute here is text-align, which I set to center because I would like to center my content in the viewable area independently of the user’s screen resolution or the available width in the browser – read on.

The CSS code above now gives us all of the available for content area in the browser, constrained only by the size of the browser window. Let’s go to the first and topmost div with the id of container. What we want to do here is to slice the available area and show our content in the center of the page. Naturally, we need to define a width – I used pixels in this example but you can specify any unit, as well as further CSS rules targeting different media.

div#container
{
	width: 900px;
	height: 100%;
	min-height: 100%;
	height: auto !important;
	margin: 0 auto;
	position: relative;
	background: #eeeeee;
}

Let’s go through this: I have specified a width of 900px for this example. The first, and most important, things to note are the height and min-height attributes. You want to set both height and min-height to 100%, remembering that the containing element of this div is body, which spans 100% of the viewable area and that what we specify is relative to the containing element. We therefore have a div that is a 100% of body that is a 100% of the browser's canvas available to display the content. However, due to differences in how browsers handle CSS, we also need to specify the height attribute one more time, this time with the value of auto and !important parameter which is going to override the first height attribute in some browsers, rendering the same effect of the div being a 100% height of body. We also specify that our left and right margin is auto and, because the parent body element is centered, the margins on the sides will be equal and our div will now be centered in the browser.

Try this example code that illustrates the above for yourself (I have, however, put CSS in the head section rather than a separate file):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Example of a Page With a Header, Content and Footer That Span 100% Height in the Browser</title>
	<style rel="stylesheet" type="text/css">
		html,body
		{
			margin: 0;
			padding: 0;
			background: #000020;
			height: 100%;
			text-align: center;
		}
		body
		{
			overflow-y: scroll;
		}
		div#container
		{
			width: 900px;
			height: 100%;
			min-height: 100%;
			height: auto !important;
			margin: 0 auto;
			position: relative;
			background: #eeeeee;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="content">
			CONTENT
		</div>
	</div>
</body>
</html>

Now, you get the idea, right? – all we have to do now is throw in a header and a footer.
One attribute I did not want to mention just yet is position that we set to relative. What it does is that it tells the browser engine to position child elements relatively to their parent element, in this case our <div id="container">. And, indeed, this plays a definitive role. Let's move on and throw in the header and the footer – you already got them in HTML, let's look at CSS for the header first:

div#header
{
	width: 100%;
	height: 150px;
	position: absolute;
	top: 0;
	left: 0;
	background: #00ff00;
}

Because the header div is a child of our container div, specifying a 100% width will span it the whole 900px. I made it 150px in height and gave it a green background. Now, when I specified position: absolute, I told the browser that this element has to be positioned absolutely to its parent (our container div), with the top left being (0,0). Thus, the top left corner of the header is aligned with the top left of the container. However, make note that our container has it's position set to relative, indicating that child elements' positions will be treated relative to their parent. Take out that attribute, and your (0,0) position will keep going to the highest parent element in the hierarchy – the simplest, take out relative from the example below for the container div and you'll find your header in the top left corner of the page, rather than top left corner of the parent div. Experiment with the code below by removing position: relative:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Example of a Page With a Header, Content and Footer That Span 100% Height in the Browser</title>
	<style rel="stylesheet" type="text/css">
		html,body
		{
			margin: 0;
			padding: 0;
			background: #000020;
			height: 100%;
			text-align: center;
		}
		div#container
		{
			width: 900px;
			height: 100%;
			min-height: 100%;
			height: auto !important;
			margin: 0 auto;
			position: relative;
			background: #eeeeee;
		}
		div#header
		{
			width: 100%;
			height: 150px;
			position: absolute;
			top: 0;
			left: 0;
			background: #00ff00;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="content">
			CONTENT
		</div>
		<div id="header">
			HEADER
		</div>
	</div>
</body>
</html>

Well, now that we got our header, let's get on with the footer. As I mentioned before, since our container div specifies that child elements will be relative to it, we can now have a say in where the footer's bottom is:

div#footer
{
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #0000ff;
}

Same as with the header, we get a 100% width of the parent container and we want our footer to be 50px in height. By specifying the bottom attribute rather than top, we tell the browser that the value we specify is counted from the bottom of the screen and up (try it yourself with the example below). So, we just specified that we want a div that is 50px in height and resides on the bottom of it's parent element. Again, since it's a child of our container, the bottom means the bottom of the container, and it's already set up to be 100% height. Neat! So, try plugging in this:




	Example of a Page With a Header, Content and Footer That Span 100% Height in the Browser
	


	
html,body
{
	margin: 0;
	padding: 0;
	background: #000020;
	height: 100%;
	text-align: center;
}
div#container
{
	width: 900px;
	height: 100%;
	min-height: 100%;
	height: auto !important;
	margin: 0 auto;
	position: relative;
	background: #eeeeee;
}
div#header
{
	width: 100%;
	height: 150px;
	position: absolute;
	top: 0;
	left: 0;
	background: #00ff00;
}
div#footer
{
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #0000ff;
}

Ok, we got header and footer! What do you do for content? - try to simply changing HTML to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Example of a Page With a Header, Content and Footer That Span 100% Height in the Browser</title>
	<link rel="stylesheet" type="text/css" href="100-percent-height.css" />
</head>
<body>
	<div id="container">
		<div id="content">
			CONTENT
		</div>
		<div id="header">
			HEADER
		</div>
		<div id="footer">
			FOOTER
		</div>
	</div>
</body>
</html>

...and you will find that you see no "CONTENT". Well, that's because it's overlapped by the header. Now, we got a 150px header and 50px footer. So, if we push the content 170px down (150px of the header plus 20px extra) using padding, it'll be just under the header. We now need to account for the footer as well and maybe some extra padding.

Now, since out content is 100% height with header and footer overlapping and content having the right padding, we got ourselves a 100% height page, no matter what the content is.

So, here is our final HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Example of a Page With a Header, Content and Footer That Span 100% Height in the Browser</title>
	<link rel="stylesheet" type="text/css" href="100-percent-height.css" />
</head>
<body>
	<div id="container">
		<div id="content">
			CONTENT
		</div>
		<div id="header">
			HEADER
		</div>
		<div id="footer">
			FOOTER
		</div>
	</div>
</body>
</html>

And our final CSS code:

html,body
{
	margin: 0;
	padding: 0;
	background: #000020;
	height: 100%;
	text-align: center;
}
body
{
	overflow-y: scroll;
}
div#container
{
	width: 900px;
	height: 100%;
	min-height: 100%;
	height: auto !important;
	margin: 0 auto;
	position: relative;
	background: #eeeeee;
}
div#content
{
	padding: 170px 20px 70px 20px;
	position: absolute;
	top: 0;
	left: 0;
}
div#header
{
	width: 100%;
	height: 150px;
	position: absolute;
	top: 0;
	left: 0;
	background: #00ff00;
}
div#footer
{
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #0000ff;
}

One last thing to mention is the overflow-y attribute that I put in. This will simply take care of your content shifting as some browsers do not show a scrollbar when the content does not exceed the available screen.

Shoot me questions if you got questions or post a comment!
I hope this helped you in one or another way!

This entry was posted in CSS, HTML and tagged , , , , , , , , . Bookmark the permalink.

6 Responses to Create a Page With a Header, Content and Footer That Span 100% Height in the Browser

  1. Great information! I’ve been looking for something like this for a while now. Thanks!

  2. It’s really a nice and helpful piece of information. I’m glad that you shared this helpful info with us. Please keep us informed like this. Thanks for sharing.

  3. Wow, wonderful blog layout! How long have you ever been running a blog for? you made running a blog look easy. The entire look of your website is fantastic, let alone the content!

  4. keygen says:

    Hello, Neat post. There’s a problem with your site in web explorer, would check this? IE nonetheless is the marketplace leader and a large portion of folks will miss your excellent writing because of this problem.

  5. ℓūfħer says:

    @pendientes_swarovski: I’ve been running it for perhaps a couple of years now. Running a blog is not difficult as long as there is content to post and time to do it – hence there isn’t that many posts here as I don’t always have time. If you know CSS and with a little bit of research about WP classes you can easily customize the look and feel. Maybe I should write a post about that 🙂 Thanks for appreciating!

  6. ℓūfħer says:

    @keygen: Are you talking about OS/2 WebExplorer? If so I doubt anyone uses that anymore 🙂 If you are talking about IE, it works on it well. I hope you are not talking about IE6 or less – I couldn’t check since I don’t have one 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *