How can you make a div expand to fill the page leaving a fixed amount of area at the bottom?

I know how to make a div expand to fill the whole page. My problem is that i want to leave a thin band at the top and a thin band at the bottom. The bands can be y amount of pixels. I then want the div in the middle to expand to fill the remaining area.

Ev开发者_如何学Pythonerytime I try this it ends up expanding past the bottom of the page. And the only reason I can work out is that the parent DIV is setup to 100% of the height so it is getting its number from that. I have tried using margins and paddings but that is not helping. It still uses 100% of the parent height.

I'm guessing you want something like (this)

A quick breakdown:

HTML:

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

CSS

html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto; padding-bottom: 150px;}
#footer {position: relative; margin-top: -150px; height: 150px; clear:both;}

This will leave a 150px high "footer" at the bottom of the wrapper div, that will stick to the bottom of the viewport

Oh, and you'll need to add margin & padding = 0 to the body or else you'll see some nasty scrollbars :(