Question

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

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

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

我正在使用jQuery并在height() div上尝试了css()和iframe，但这些并未改变iframe的维度。 iframe保持相同的小型默认维度。

如果我在iframe CSS中手动指定百分比，则调整大小有效，但由于这些是百分比，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>

Answer 1

将resize事件绑定到window，并设置iframe的高度：

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

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

如何使用iframe编写可调整大小的页面？

1 个答案: