Jquery (or CSS) autoresize iframe to the bottom?

i've no idea how i can set properties for an iframe that's positioned 300px from the top, but should reach ALWAYS the bottom!

So at the moment i've set the height of the iframe to 500px. The height should dynamically change when i resize the browserwindow.开发者_开发知识库 The iframe should start 300px from the top and should always reach the bottom.

I'm not much of an css expert. Any idea what i have to do?

    #frame {
 overflow:hidden;
 border:none;
 width:100%;
 height:500px;
 margin-top:300px;
}

html, body { /* Allow the #wrapper div to stretch 100% in both directions */
    height: 100%;
    width: 100%;
    margin: 0;
}
#wrapper { /* necessary because it for some reason doesn't work with the iframe */
    position: absolute;
    top: 300px;
    bottom: 0;
    left: 0;
    right: 0;
}
#frame {
    width: 100%;
    height: 100%;
    border: 0;
}

<div id="wrapper">
    <iframe id="frame" src="http://www.google.com" />
</div>

You can use 'margin-bottom' same way, as you use 'margin-top'. Easiest CSS way, but I'm not sure, if this works on every browser.