2

我在与网页相同的域中有一个 iframe。

我有一个我想保持相同高度的标题（我不知道它是什么，比如说 80px），而正文包含 iframe，当浏览器调整大小时它会调整大小：

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

我正在使用 jQuery 并在 div 上尝试过height()，css()但iframe这些不会改变iframe's 的尺寸。iframe保持相同的小默认尺寸。

如果我在 CSS 中手动指定百分比iframe，则调整大小会起作用，但因为这些是百分比，所以iframe会超出直接页面的边界，并在足够高的百分比值将其边框推离屏幕后被截断。

我需要一些方法来帮助iframe计算自己的像素边界，以便它保持在页面的边界内。我可以获取窗口的宽度和高度，但如前所述，应用这些值css()并height()没有更新iframe的大小。

再说一遍：我正在与iframe父页面在同一个域中使用。

我将如何正确编码标题和 iframe 的大小调整，以便resize()操作（或调整浏览器窗口大小）真正起作用？

我尝试过的代码如下所示：

<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>
4

1 回答 1

2

在 上绑定resize事件window，并设置 的高度iframe：

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

演示：http: //jsfiddle.net/Guffa/t4b4j/

于 2012-04-05T10:28:09.777 回答