How to use 100% height with css

Attempt #3.

Using css, with a strict doctype, can someone please draw 4 div boxes t开发者_运维知识库o meet these requirements.

1. The wrapper or outermost div will scale in height. That means that it could be any height.
2. The middle div should always be 100% high to match the outer/parent div (#1 in my list)
3. The next div should be positioned inside, and at the top of div #2
4. The last div should be positioned inside, and at the bottom of div #2

NOTES: If you use absolute positioning for this, you will put divs 3 and 4 outside of div #1 and that won't work. The key is to keep divs 3 and 4 within div #2

---

<div id="wrapper">
 <div id="middle">
  <div id="top">top</div>
  <div id="bottom">bottom</div>
 </div>
</div>

#wrapper { height: 200px;  position: relative;  }
#middle { height: 100%;  }
#bottom { position: absolute; bottom: 0; }

It should work for any height you give the #wrapper.

you can play with it here: http://jsfiddle.net/dmBsa/