Question

I am currently working on a site that requires a footer to be placed either at the bottom of the window, or the bottom of the page content, whichever is lower. I have tried using the height: 100% method, but this causes a problem.

I also have a position: fixed header, and some padding on my content (defined in pixels). Also, the height of the content may change after the page has loaded (use of accordions, etc.), so I wonder if there’s a pure CSS way to position the footer to either the bottom of the window, or the bottom of the document, while still allowing pixel padding and so forth.

Here’s an outlined structure of the HTML:

<header></header>
<div class="content">
    <footer></footer>
</div>

I have also put together a Fiddle to demonstrate how the CSS works at the moment: http://jsfiddle.net/LY6Zs/. I am unfortunately unable to change the HTML structure (i.e. breaking out the footer element from .content.

Answer 1

You first need to have a container div just after the which contains all the content

.container
{
min-height:100%;
position:relative;
margin:0 auto;
}

.footer{
position:absolute;
bottom:0;
}