Skip to content

Instantly share code, notes, and snippets.

@ghernandez345

ghernandez345/main.css

Last active December 18, 2015 04:19
Show Gist options
  • Save ghernandez345/5724692 to your computer and use it in GitHub Desktop.
Save ghernandez345/5724692 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky footer
Raw
main.css
html,body {
height: 100%;
}
/* The bottom margin on #wrap must be the negative value of the height on #push and #footer.
*
* e.g.
* ------------------------------------------
* #push and footer height is 60px;
* #wrap margin bottom is -60px;
*/
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
/* Make sure that #push and #footer have the same height. */
#push, #footer {
height: 60px;
}
Raw
stickyFooter.html
<html>
<head>
...
</head>
<body>
<!-- Wrap all page content in here. The only thing not wrapped in this is #footer. -->
<div id="wrap">
<div class="container">
...
</div>
<!-- Is responsible for pushing down footer the proper amount so that it appears at the
bottom. It is always an empty div -->
<div id="push"></div>
</div>
<!-- Make sure footer is not a child of the #wrap element. -->
<div id="footer">
...
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment