2

Web ページと同じドメインに iframe があります。

同じ高さを維持したいヘッダーがあります (それが何であるかはわかりません。80px としましょう)。本体には iframe が含まれており、ブラウザーのサイズが変更されるとサイズが変更されます。

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

私はjQueryを使用しており、divで試してみheight()ましcss()たが、それらはの次元iframeを変更しません。は、同じ小さい既定の寸法iframeのままです。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 に答える