This is somewhat related to [this question](https://stackoverflow.com/questions/2198116/xhtml-css-how-to-make-inner-div-get-100-width-minus-another-div-width) but I'm trying to achieve this when the div is aligned vertically.

More or less, this is what I'm trying to achieve:

Main Div: Take the rest of the screen
-------------------------------------

---

Footer Div: Take as much space as needed
----------------------------------------

The css for float:bottom isn't available, so I'd like to hear some alternatives.

Here's what I have at the moment:

```
<div id="main_div" style="height:100%;overflow:scroll">
...Contents
</div>

<div id="footer_div" style="height:50px">
...Contents
</div>

```

Footer shows below main\_div and the user has to scroll down to see it, instead of main\_div adjusting itself to take just enough screen height to prevent the scrollbar to show up.