Position footer to bottom of window or page, whichever is larger

Posted by BenM on Stack Overflow See other posts from Stack Overflow or by BenM
Published on 2012-10-25T10:52:09Z Indexed on 2012/10/25 11:00 UTC
Read the original article Hit count: 141

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about css