Make div stay at bottom of page's content all the time even when there are scrollbars

This is precisely what position: fixed was designed for:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;

Here's the fiddle:

Unfortunately you can't do this with out adding a little extra HTML and having one piece of CSS rely on another.


First you need to wrap your header,footer and #body into a #holder div:

<div id="holder">
    <div id="body">....</div>


Then set height: 100% to html and body (actual body, not your #body div) to ensure you can set minimum height as a percentage on child elements.

Now set min-height: 100% on the #holder div so it fills the content of the screen and use position: absolute to sit the footer at the bottom of the #holder div.

Unfortunately, you have to apply padding-bottom to the #body div that is the same height as the footer to ensure that the footer does not sit above any content:

    height: 100%

    min-height: 100%;

    padding-bottom: 100px;    /* height of footer */

    height: 100px; 
    position: absolute;
    left: 0;
    bottom: 0; 

Working example, short body:

Working example, long body:

Just worked out for another solution as above example have bug( somewhere error ) for me. Variation from the selected answer.

html,body {
    height: 100%

#nonFooter {
    min-height: 100%;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);

#footer {
    margin: 0;
    clear: both;
    position: relative;

for html layout

    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>

Well this way don't support old browser however its acceptable for old browser to scrolldown 30px to view the footer

  • plunker