Make footer stick to bottom of page correctly
I am trying to have my footer (just a div with a line of text in it) be at the bottom of the screen if the content doesn't go all the way to the bottom, or be at the bottom of the content if the content requires scroll bars. If the content doesn't require scroll bars, it works perfectly, but when the content is too long, the footer is still in the same spot, sitting right on top of the content.
My basic div structure is:
<div id="container">
<div id="body"></div>
<div id="footer"></div>
</div>
My corresponding CSS (stripped down somewhat):
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;
}
#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;
}
Answer
The simplest solution is to use min-height on the <html> tag and position the <footer> with position:absolute;
Demo: jsfiddle and SO snippet:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>