John John - 6 months ago 46
HTML Question

iframe reaches bottom of page

Is there a way to make the height of the

reach exactly the bottom of the page? It is hard to judge by using
, and it might be dependent on browser.

The code is below:

<!DOCTYPE html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="" style="width:100%; height:95%"></iframe>


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