Home/ Questions/Q 7751595
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T11:35:20+00:00

I have an iframe in the same domain as the web page. I have

  • 0

I have an iframe in the same domain as the web page.

I have a header that I would like to keep the same height (I don’t know what it is, let’s say 80px), while the body contains the iframe, which is resized when the browser is resized:

----------        --------------
| header |        |   header   |
----------        --------------
| iframe |   ->   |            |
|        |        |            |
|        |        |    ....    |
----------        |            |
                  |            |
                  --------------

I am using jQuery and have tried height() and css() on the iframe div, but those do not change the iframe‘s dimensions. The iframe remains at the same, small, default dimensions.

If I manually specify percentages in the iframe CSS, then resizing works, but because these are percentages, the iframe goes beyond the immediate page’s borders and gets cut off after a high enough percent value pushes its borders off the screen.

I need some way to help the iframe compute its own borders by pixels, so that it stays within the borders of the page. I can grab the window width and height, but as mentioned, applying css() and height() from those values did not update the iframe‘s size.

Again: I am working with the iframe in the same domain as the parent page.

How would I properly code the resizing of both the header and iframe, so that a resize() operation (or resizing the browser window) actually works?

The code I have tried is something like the following:

<html>
<head>
... // load jquery, etc.
<script>
function resize() { 
    var w = $('#body').width(); 
    var h = $('#body').height();

    $('#header').width(w + "px"); // works
    $('#header').height("80px"); // works

    $('#my_iframe').css("width", w + "px"); // doesn't work
    $('#my_iframe').width(w + "px"); // doesn't work, either

    $('#my_iframe').css("height", (h-80) + "px"); // doesn't work
    $('#my_iframe').height((h-80) + "px"); // doesn't work, either
}
</script>
</head>

<body onresize="resize()" id="body">
<div id="header"><div>
<iframe id="my_iframe" .../>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Bind the resize event on the window, and set the height of the iframe:

    $('#content').css('height', ($(window).height() - 80) + 'px');

    Demo: http://jsfiddle.net/Guffa/t4b4j/

    • 0