HTML iframe in div with relative size

I have a layout question for HTML, concerning a div with an iframe in it. Right now I have:

<div style="width:100%;height:20px">something</div>
<div style="width:100%;height:100%;">
<iframe src="whatever" style="width:100%;height:100%" />
</div>

Basically, I'm looking for Auto,* layout (the top is fixed size, the bottom is "take the rest"). If you do this, and the content in the iframe is also relative at 100/100%, the browser scroll bar does not work correctly.. it always allows scrolling for 20pixels (because apparently relative/set size doesn't work how i think it works), and if you re-size smaller than the iframe开发者_运维百科, it doesn't work as expected. If i set the height of the 2nd div to some value, like 20px, then it works as expected, but since I don't know the size of the iFrame child, I can't do that..

Am I doing something fundamentally wrong here?

---

http://jsfiddle.net/KphGQ/ .. Take a look at this