CSS Sticky Footer
Jump to navigation
Jump to search
Voorbeeld uitgewerkt:
ryanfait.com/sticky-footer
XHTML
<!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>A CSS Sticky Footer</title>
<!--
The second stylesheet is to make things look pretty.
The first one is only the important one.
-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<h2>A CSS sticky footer that just works</h2>
<p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © 2006-2008 <a href="http://ryanfait.com/" title="Las Vegas Web Design">Ryan Fait</a></p>
</div>
</body>
</html>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
We've all tried to use a sticky footer one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based sticky footer are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a sticky footer that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.
</body> </html>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}