A div should always be 100% height - either viewport or content. Followed examples online and still stuck!

Question

I have viewed the source of this page and applied it to my page.

In FireFox and Safari, I can't for the life of me get the main container to be the height of the viewport. There is always an ugly margin down the bottom.

I have inspected all I can with Firebug, which seems to tell me that neither html, body or #mainContainer have the correct height.

I have done this countless times before, but now I am making modifications to an older site and can't seem to get it to work.

Please someone point me in the right direction.

Thanks muchly.

Answer 1

Try overflow:hidden; on #pageContent. Seems like it's either not containing floats or something is overflowing

EDIT: You have a min-height of 430px and a height of 460px on #homePage. Can't you leave the height as auto?

Answer 2

Your page is XHTML while the example page is HTML.

You have to add this to your page:

<style type="text/css">
    html, body {
        height:100%;
    }
</style>

Answer 3

Your CSS has the #homePage height set to 460px. I removed this in Firebug and the page stretched to the bottom, though your footer would need some adjustment.