Skip to content

Instantly share code, notes, and snippets.

@neeraj87 neeraj87/index.html
Last active Mar 15, 2017

Embed
What would you like to do?
Keeping footer of a site to the bottom of the page
<!DOCTYPE html>
<html>
<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:#336633;
}
</style>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
</html>
@neeraj87

This comment has been minimized.

Copy link
Owner Author

neeraj87 commented Mar 15, 2017

Credit goes to this site/author: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

I have just created this gist in case that page is ever lost.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.