Why does the iframe extend past the end of the page when 100% in height?

I have an iframe on my site in a div. I have set both to 100% in height I'm also using the blueprint framework hence span-12 last for the class. My question is why is there still a scroll bar on the site?

CODE:

<div id="friend_pane" style="background-color: #FF0000;height: 100%;" class="span-12 last">
<iframe id="friendpane_area" style="width: 515px; height: 100%" src="http://friendsconnect.org/friendpane/shell.php" frameborder="0" allowTransparency="true"></iframe>
</div>

Rather than just extent as much as possible it goes past the bottom of the page and has a scroll bar. Why is it assuming this height?

SNAPSHOT开发者_如何学运维:

iFrame in DIV marked in red.

There's a few things you could try, make sure html { height: 100% } first, then

iframe { overflow:hidden; }

or

<iframe id="friendpane_area" style="width: 515px; height: 100%; overflow: hidden" scrolling="no" src="http://friendsconnect.org/friendpane/shell.php" frameborder="0" allowTransparency="true"></iframe>