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>
1 Answer 1
Bind the resize event on the window, and set the height of the iframe:
$('#content').css('height', ($(window).height() - 80) + 'px');
Comments
Explore related questions
See similar questions with these tags.
iframeless an80pxsection at the top? Or should theiframebe able to resize it's parent window?