Is there a way to make the height of the <iframe>
reach exactly the bottom of the page? It is hard to judge by using height:xx%
, and it might be dependent on browser.
The code is below:
<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>
As annoying as it is to use tables for layout, they're still the best way to consistently handle vertical dimensions. The following still displays a few white pixels around the edge of the iframe, and has an extra scrollbar in some versions of Firefox, but is as close as I've been able to achieve:
If you really want to avoid the table elements, you might get some traction out of div tags with
display:table
,display:table-row
, anddisplay:table-cell
, but be prepared for even more annoying quirks in certain browsers.Well, this seems to be a tricky but you have to keep
<html>
OR<body>
tag height 100% to achieve thisyou can't. I tried this before, but it is an issue with the iframe it will remain this way, until they find a way to expose the height of the inner html document... following the standards. If you remove the DOCTYPE of the inner document, I guess you'll have some access to it. Make Iframe to fit 100% of container's remaining height
Using JavaScript/jQuery, you can precisely set the right dimension for the
IFRAME
element, without the need to access to DOM of the frame itself (cross-domain issues), relying on tables or absolute positioning (useless if the content above the frame is dynamic in height):Example: http://jsfiddle.net/hongaar/jsdYz/