Skip to content

Instantly share code, notes, and snippets.

@hced

hced/stickyfooter.html

Created September 5, 2012 12:57
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hced/3636169 to your computer and use it in GitHub Desktop.
Save hced/3636169 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky Footer (credits to Ryan Faith)
Raw
stickyfooter.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* delete if IE6 support is not needed */
height: 100%; /* delete if IE6 support is not needed */
margin: 0 auto -142px; /* The bottom margin should be the negative value of the footer's height (including any padding or borders you may have added to it) */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
</style>
</head>
<body>
<div class="wrapper">
<p>Here's some content.</p>
<!-- I'm nedded -->
<div class="push"></div>
</div>
<div class="footer" style="background-color: yellow;">
<p>Here's the footer.</p>
<small>This sticky footer method is credited to Ryan Fait (<a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/">read more</a>).</small>
</div>
</body>
</html>
@fatihacet
Copy link

Nice one. Works even content in .wrapper longer that clientWidth.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment