Skip to content

Instantly share code, notes, and snippets.

@stanosmith
Created April 9, 2012 22:49
Show Gist options
  • Save stanosmith/2347161 to your computer and use it in GitHub Desktop.
Save stanosmith/2347161 to your computer and use it in GitHub Desktop.
HTML: Sticky Footer
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>StickyFooter</title>
<style type="text/css" media="screen">
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/*Opera Fix*/
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header 1</h1>
</div>
<div id="main">
<p>Content here.</p>
</div>
</div>
<div id="footer">
<p>Footer.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment