Sticky footer + fixed width + background color

Question

There are many questions in SO regarding footer at bottom but I couldn't find a solution for this case.

I have this scenario:

_{(source: cucuza.com)}

I want the Content div to expand to meet the top edge of the footer.

The footer must have sticky footer behavior: when the page height is less than the viewport, the footer has to be at the bottom of the viewport, and when the page height is longer than the viewport, the footer must stay at the bottom of the page.

Answer 1

While I was writing the question, I figured out the solution:

this is a live demo.

_{(source: cucuza.com)}

and this is the code:

HTML:

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>

CSS:

html,
body {
    margin:0;
    padding:0;
    height:100%;
    background:#ccc;
}
#wrapper {
    min-height:100%;
    position:relative;
    width: 500px;
    margin: 0 auto;
    background:#fff;
}
#header {
    background:#5ee;
}
#content {
    padding-bottom:80px;
    min-height:100%;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

How it works:

• The html and body keep expanded thanks to the height:100%
• The min-height property in the #wrapper keeps it expanded to full height, and when the content is higher than 100% the #wrapper expands beyond the browser canvas (scroll).
• The #wrapper has a relative position, so the absolute bottom position of the #footer keeps the footer always at the bottom of the #wrapper.
• The #content padding-bottom property, having the same value than the #footer height, prevents #footer and #content overlapping, because the #footer will be always covering the bottom of #wrapper and would cover the #content if this one reaches the bottom of the #wrapper. You cannot put this property in the #wrapper, because the height would result bigger that 100% (100% + padding) and the #footer would fall outside the screen.
• The #wrapper, and not the #content, has the background color property, since it is the one that is always fully expanded.