Question

I have an outer div, called #wrap, and two inner divs: #container and #footer. Content is inside #container, and is dynamic. There may be a little, there may be a lot.

When content is minimal, the footer div may appear half-way up the page. However, this changes depending on the monitor/resolution. What is 50% from bottom on a large monitor may only be 10% from bottom on a small/cluttered viewport.

If I use this css method:

body,html { height: 100%; }
#wrap     { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer   { position:absolute; bottom:0px; }

then the page will always extend to use 100% of the viewport and the footer will be at bottom of the viewport – exactly as required.

However, if the content increases (or if a small viewport), the footer may overwrite any content extending into its 130px height — the footer will not bump down.

Is there a way to remedy this?

Note: I don’t wish to use percentages for the footer height as it is fixed at 130px and cannot squish.

Here is a fiddle I’ve been using to experiment

Answer 1

This is the best example of sticky footer I’ve seen: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

UPDATE (April 2017): As the above link has become inoperable (and much time has passed since the original post) I’d like to offer the following solution to this problem:

Permanently fixed:

#container {
    padding-bottom: 130px; // ...or more
}

#footer {
    bottom: 0;
    height: 130px;
    position: fixed;
    width: 100%;
}

For a dynamically fixed element, check out this jQuery plugin: https://libraries.io/bower/jquery-sticky-header-footer