Continuous layout with DIVs

<div id="top">
*height: auto;
min-height: 100%;*

    <div id="content">
    *min-height: 500px;*
    </div>

    <div id="middle">
    *css ???*
    </div>
</div>

<div id="footer">    
</div>

This code works nice when the screen size is normal. But in full screen mode, the footer goes to the bottom of the page (wanted behaviour) but the ''middle'' div must increase its height to get the footer. I mean, the 3 elements (content, middle and footer) must be continuous.

Which css rules should I use to do this behaviour?

Thanks in advance!

UPDATE.

I've used a couple css rules and works, but don't in IE8 (works in IE9, Chrome, FF3 e FF4). The relevant CSS is:

Top{ height: auto; }
Content{ min-height: 100%; }
Middle{ overflow: auto; padding-bottom: 130px; }
Footer{ clear: both; height: 130px; margin-top: -130px; position: rela开发者_如何学Pythontive; }

---

You might try CSS Media Queries with max or min-height. Examples here: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html and documentation here: http://www.w3.org/TR/css3-mediaqueries/

---

height:100%; should be all that is needed to make it take up the available space.

---

The Bad News: To be honest, mate, I don't think this is possible with this exact specification. It would take some very clever css at any rate. However, tables would work nicely. I'm completely against the idea, but if this design requirement is a must, then perhaps you should go the route.

The Good News: Depending on why it is you need them to be fluid, we could maybe give the desired effect. If it's just for backgrounds to match up, we could probably do that. Update your post with more information and I'll (hopefully) update mine with an answer.