FRANK'S
TUTORIALS

CREATE A FIXED ('STICKY') FOOTER WITH CSS v. 2.2

To be able to understand this tutorial well, you should have a fair working knowledge of CSS. If in doubt, you first might want to go through (the first bulleted list of) How to Position in CSS.

There can be many purposes of getting 100% height with CSS (the URL of this page). None of these objectives are difficult to reach if you know a few basic CSS principles.

Fixed footer

One of the objectives is a fixed (header and sidebar and) footer, with or without simulated iframe. A fixed footer always stays in place on the screen, at the bottom of the browser window. Whether the page contents are shorter than or exceed the viewport height.

Sticky footer

A sticky footer actually does nothing more than hang at the bottom of the page contents. Which occurs naturally, if the footer is put last in the code, or at least under the article, and the elements are in the flow. People call all sorts of footers with special behavior 'sticky' footers, but as you will see, we need different terms for different footers.

Min-height layout

Another objective that people sometimes have is to create a layout that at least stretches down to the bottom of the browser window, with or without footer. For that, one indeed needs 100% height declarations, but it should be called what it is: a Min-Height Layout. Here is how to create New tab that very easily, including an IE6 work-around.

Faux columns

Yet another objective that web-designers sometimes have with 100% height is to create a multi-column layout in which only one column is filled with content and the other(s) stretch(es) along with the expanding content column. However, that has little to do with 100% height. In stead, you should use the technique known as faux columns for that. There are two cross-browser and easy sub-techniques: with background image New tab and Faux Columns without image New tab.

Returning to the fixed footer, I assume that you want the (header and) footer to have a determined height (the term 'fixed height' should be avoided, for obvious reasons). I also assume that you want a horizontally centered layout, which necessitates a determined width as well.

In principle, there are two options with a fixed footer: you can have the scrollbar in the content section, which gives the impression of the content being loaded in an iframe, or you can have the scrollbar in its normal position. I would recommend the first option, because with the second the navigation menu can move out of sight if the browser window gets too narrow and does not return with horizontal scrolling then. Fiddle with the live examples to see for yourself.

1. Fixed footer, simulated iframe

Here is the live example newWindow of what we will be creating here. To achieve it, we best use the principles of nested position:absolute plus overflow:scroll, which results in this code:


HTML:
    <div id="grandContainer">
        <div id="headerContainer">Header</div>
        <div id="sideContainer">Side</div>
        <div id="contentContainer">Put a long Lorem Ipsum here</div>
        <div id="footerContainer">Footer</div>
    </div>

CSS:
    html, body {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
        }
    #grandContainer {
        height: 100%;
        width: 980px;
        margin: auto;
        position: relative;  /* explanation below */
        background: yellow;  /* serves as check */
        }
    #headerContainer {
        height: 100px;
        background: orange;
        line-height: 100px;  /* centers vertically */
        }
    #sideContainer {
        position: absolute;
        top: 100px;
        bottom: 50px;
        left: 0px;
        right: 830px;  /* 980 — 830 = 150px width */
        background: pink;
        }
    #contentContainer {
        position: absolute;
        top: 100px;
        bottom: 50px;
        left: 150px;
        right: 0;
        _right: -17px;  /* IE6 correction */
        overflow-y: scroll;
        background: aquamarine;
        }
    #footerContainer {
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;  /* necessary for IE6 */
        right: 0;  /* ditto */
        background: red;
        line-height: 50px;  /* centers vertically */
        }
    div {
        text-align: center;
        }

The grandContainer's position:relative goes well together with the margin:auto and makes the child elements with position:absolute be positioned relative to it. See How to Position in CSS for more information on that. IE6 does not render position:absolute well, but with this Javascript newWindow and the extra lines in the CSS it does. The rest should be self-explanatory; just study it div by div.

2. Fixed footer, normal scrollbar

As indicated, this is the non-recommended option, but you may have valid reasons why you still want it. To achieve it (see this live example newWindow), we best use a combination of position:fixed, left and a negative margin-left (described here), resulting in this code:


HTML:
    <div id="headerContainer">Header</div>
    <div id="sideContainer">Side</div>
    <div id="contentContainer">Put a long Lorem Ipsum here</div>
    <div id="footerContainer">Footer</div>

CSS:
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        }
    #headerContainer {
        width: 980px;
        height: 100px;
        position: fixed;
        left: 50%;
        margin-left: -490px; /* half the width */
        background: orange;
        line-height: 100px; /* centers text line vertically */
        }
    #sideContainer {
        width: 150px;
        height: 100%; /* for IE6 */
        position: fixed;
        top: 100px;
        bottom: 50px;
        left: 50%;
        margin-left: -490px;
        /* half the width of the header to line up with it */
        background: pink;
        }
    #contentContainer {
        width: 830px;
        position: absolute;
        top: 100px;
        left: 50%;
        margin-left: -340px;
        min-height: 1200px; /* to guarantee continuous background */
        background: aquamarine;
        z-index: -1; /* position:absolute gives a higher
                        z-index than fixed */
        }
    #footerContainer {
        width: 980px;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 50%;
        margin-left: -490px;
        background: red;
        line-height: 50px; /* centers text line vertically */
        }
    div {
        text-align: center;
        }

The code should be pretty much self-explanatory again; just study it div by div. IE6 does not render position:fixed at all, but with this Javascript newWindow it does, basically. You might wonder why I didn't use nested position:fixed. The reason is that IE6, even with the Javascript, does not render that well enough.


Change log
V. 2.0: made a distinction between the various objectives one can have with 100% height and offered solutions for the other objectives; explained the difference between fixed and sticky footer.
V. 2.1: re-formatted CSS code snippets in the text.
V. 2.2: added link to Faux Columns without image sub-technique (check it out!); included recommendation on fixed footer sub-technique.


About
I am Frank Conijn, a web designer and author from Amsterdam, the Netherlands. At the moment, I am too busy with other web projects to be making websites for others, but I am available if you want to hire me for problem solving or advice. Just mail me at f.conijn@conijnbotFoolconsultancy.com.

Was this article helpful and do you have any Google account? A Google recommendation of my business, by means of simply clicking this button, is appreciated:

For general comments on and suggestions for this article, mail met at the above address. For free help with minor problems, post your question on one of these web design forums (pop-up).