John John - 3 months ago 21
HTML Question

iframe reaches bottom of page

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>

Answer

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):

$(function() {
    var aboveHeight = $("#aboveFrame").outerHeight(true);
    $(window).resize(function() {
        $('#frame').height( $(window).height() - aboveHeight );
    }).resize();
});

Example: http://jsfiddle.net/hongaar/jsdYz/

Comments