Make Iframe to fit 100% of container's remaining height
- by Darkthread
I want to design a web page with a banner and a iframe. I hope the iframe can fill all the remaining page height and be resized automatically as browser resizing. Is it possible to get it done without writing Javascript code, only with CSS?
I tried set height:100% on iframe, the result is quite close but the iframe tried to fill the whole page height, including the 30px height of banner div element, so I got unneccessary vertical scrollbar. It's not perfect.
Update Notes: Excute me for not describing the question well, I tried CSS margin, padding attribute on DIV to occupy the whole remining height of a web page successfully, but the trick didn't work on iframe.
<body>
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>
Any idea is appreciated.
