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.
