But it is not possible to get just the netto view port of the browser or…
I think instead, you might want to do what we do: we fake it.
I don’t know what this maincontainer has in it that people see, but you can make it LOOK like it fills “all remaining space” with trickery and deceit.
<html>
<body>
<div id=“maincontainer”>
<top sponsor stuff, 100% wide and a background colour so you can’t see maincontainer peeking out from behind it>
rest of the page…
</div>
<div id=“footer”>
footer
</div>
</body>
</html>
However this means you’d need to use the sticky footer as Ryan mentioned.
html, body {
height: 100%; /by setting this, you are able to make maincontainer 100% high/
}
#maincontainer {
min-height: 100%;
}
- html #maincontainer {height: 100%;} /IE6 if you care about it/
So Maincontainer is now 100% high. That means you cannot add any top or bottom borders, margins or padding.
So your sponsor stuff can be inside maincontainer but you can make it LOOK like maincontainer begins after them… if maincontainer has a top border for example, instead give this to the bottom of the sponsor block. If the sponsor stuff has a background colour, nobody will see that maincontainer actually starts at the top of the page. They’ll only see it coming after the sponsor block.
Then the sticky footer, which basically makes the footer sit right on top of the bottom of maincontainer. The nadeel with sticky footers is you need to know the height. You can have an em-based height, but no dynamic heights.
Also then, some inner container inside mainconainter will have to have enough bottom padding to make room for this footer.
If maincontainer was to have a border or something on the “bottom” then, like the sponsor box, you would instead put this on the top of the footer.
sort of an example, the purplish area should be like your maincontainer
Though the footer there is not a sticky footer, but you can see what those do from Ryan’s links.