(0)
A common request is a footer that stays at the bottom of the page unless the content is longer than the view port. I really like this question because without using the correct standards, you cannot easily do this. A footer that is positioned at the bottom of the page and then shifts to the bottom of the content is based around two key concepts.
Concept 1
The fact that if a relatively positioned element holds an absolutely positioned element, then the absolutely positioned element is display based on the parent's location. The relatively positioned element acts as a container. For a quick demonstration of this concept, check out the absolute-inside-relative page.
Concept 2
If you give a container a minimum height of 100% with the min-height attribute, the minimum height of the container is equal to the height of its parent element. It is important to note that Internet Explorer 6 does not support the min-height css attribute, but because it incorrectly interprets the default visible value of the overflow attribute, it causes our container to stretch up until its content fit inside of it. These incorrect interpretations simulate a min-height attribute.
Some Base Code
Before we get started, we need some base code to play with:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>A Footer at the Bottom Example 1</title>
<style type="text/css" media="screen, tv, tty">
html, body {
margin:0;
background: #900;
}
#wrapper {
width: 80%;
margin: 0 auto;
background: #fff;
}
#footer {
background: orange;
width: 100%;
}
h1, p {
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>Main Content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="footer">
<p>I'm a footer at the bottom of the screen.</p>
</div>
</div>
</body>
</html>
Note: With this code it appears that the footer is always at the bottom of the element, this is just because it was declared last. If adjust the height of the wrapper, you will see that it doesn't stay at the bottom of the wrapper, it stays at the bottom of the content.
Applying the Concepts
Using the first concept, we first attach the footer to the bottom of the wrapper:
<style type="text/css" media="screen, tv, tty">
html, body {
margin:0;
background: #900;
}
#wrapper {
width: 80%;
margin: 0 auto;
background: #fff;
position: relative;
}
#footer {
height: 50px;
background: orange;
width: 100%;
position: absolute;
bottom: 0;
}
#content {
padding: 0 0 50px;
}
h1, p {
margin: 0;
}
</style>
You'll notice that I also added padding to the bottom of #content. This is because without it, the footer will cover the content. So I set the bottom padding for the element above the footer to the height of the footer, in this case 50px.
Now we apply the second concept. First, apply 100% to html and body. You might ask why I applied it to html as well because I explained that the contained element will take the height of the container. Although wrapper is contained in body and body therefore needs to be 100%, body is contained inside of html. We need to declare html to be 100% so that the body will stretch to fill the page. Second, we set a min-height on our wrapper. The exact code is as follows:
<style type="text/css" media="screen, tv, tty">
html, body {
height: 100%;
margin:0;
background: #900;
}
#wrapper {
min-height: 100%;
width: 80%;
margin: 0 auto;
background: #fff;
position: relative;
}
#footer {
height: 50px;
background: orange;
width: 100%;
position: absolute;
bottom: 0;
}
#content {
padding: 0 0 50px;
}
h1, p {
margin: 0;
}
</style>
Congratulations! It stays at the bottom
Play around with your window size and you'll see that it stretches to fit the bottom of the content, and stay at the bottom of the page otherwise. If yours isn't working, take mine and play with it. Compare it to yours to try and fine out why yours isn't working:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>A Footer at the Bottom Example 1</title>
<style type="text/css" media="screen, tv, tty">
html, body {
height: 100%;
margin:0;
background: #900;
}
#wrapper {
min-height: 100%;
width: 80%;
margin: 0 auto;
background: #fff;
position: relative;
}
#footer {
height: 50px;
background: orange;
width: 100%;
position: absolute;
bottom: 0;
}
#content {
padding: 0 0 50px;
}
h1, p {
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="footer">
<p>I'm a footer at the bottom of the screen.</p>
</div>
</div>
</body>
</html>
