webin/KeepFooterBottom.html

## KeepFooterBottom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>pure css keep footer at the bottom of the page</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;	/* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;	/* Height of the footer */
background: #6cf;
}
/* other non-essential CSS */
#header p,
#header h1 {
margin: 0;
padding: 10px 0 0 10px;
}
#footer p {
margin: 0;
padding: 10px;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>

<div id="container">
<div id="header">
<!-- Header start -->
<p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">&laquo; Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
<!-- Footer end -->
</div>
</div>

</body>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>pure css keep footer at the bottom of the page</title>
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	#container {
	min-height: 100%;
	position: relative;
	}
	#header {
	background: #ff0;
	padding: 10px;
	}
	#body {
	padding: 10px;
	padding-bottom: 60px; /* Height of the footer */
	}
	#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 60px; /* Height of the footer */
	background: #6cf;
	}
	/* other non-essential CSS */
	#header p,
	#header h1 {
	margin: 0;
	padding: 10px 0 0 10px;
	}
	#footer p {
	margin: 0;
	padding: 10px;
	}
	</style>
	<!--[if lt IE 7]>
	<style media="screen" type="text/css">
	#container {
	height: 100%;
	}
	</style>
	<![endif]-->
	</head>
	<body>

	<div id="container">
	<div id="header">
	<!-- Header start -->
	<p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">« Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
	<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
	<!-- Header end -->
	</div>
	<div id="body">
	<!-- Body start -->
	<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
	<!-- Body end -->
	</div>
	<div id="footer">
	<!-- Footer start -->
	<p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
	<!-- Footer end -->
	</div>
	</div>

	</body>