Search code examples
htmlcssheightfooter

Make html footer occupy the rest of the body

So I am trying to code the footer of my web app of it occupies the rest of the body's height.

Picture: http://img1.uploadscreenshot.com/images/orig/3/8906151296-orig.png

Notice the light area beneath the dark area, the dark area should occupy all of it.

Some of my html code:

<body>
....
<footer>
    <hr>
    <ul id="footerContainer">
        <li class="right">
            <ul>
                <li>
                    <a href="" class="family-filter">Filtro Fami....</a>
                </li>
            </ul>
        </li>
    </ul>
</footer>
<script>...</script>
</body></html>

CSS:

....
#footerContainer {width: 90%; min-width: 525px; margin: 0 auto; position: relative;}
....

footer hr{ border: 0; height: 30px; background: url('../imgs/footer-top.png') repeat-x scroll; }
footer {
  background: url('../imgs/footer-bg.png') repeat scroll bottom;
  height: 100%;
  display: block;
  margin: 0 auto;
  padding: 0;
  overflow: auto; 
}
#footerContainer {margin: 0 auto; position: relative;}
#footerContainer li { display: inline;}
#footerContainer li .right {float: right;}
#footerContainer li a {}

Any suggestions?

Update1:

This is what happens: http://img1.uploadscreenshot.com/images/orig/3/8906391235-orig.png when I set

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

Update2:

http://awesomescreenshot.com/0382hf1ff

Zoom out and in at this page: line25.com/wp-content/uploads/2010/blog-design-coded/demo/… and check the footer area, that's how I need it work on my layout.

Solution

  • Demo: JsFiddle

    Giving an element height: 100% means that it occupies 100% of the closest parent that has height defined. In this case you don't know the footers height, because the height of the content is variable.

    I don't know the rest of your html structure, but you could give the body a white background-color and the content div dark grey.