CSS Sticky Footer

From Edgar BV Wiki
Jump to: navigation, search

CSS/XHTML Sticky Footer

Alistapart about footers

ryanfait.com/sticky-footer


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 */
}

CSS Sticky Footer

</div>

A CSS sticky footer that just works

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.

</div>

</body> </html>



</pre></code>

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 */
}