web-dev-qa-db-ja.com

親ウィンドウのサイズが変更されたときにiframeのサイズを変更する方法

これは「コンテンツの高さに応じてiframeのサイズを変更する」という別の質問ではないと思います。

親ウィンドウのサイズ変更に応じて、iframeを動的にサイズ変更したいのですが。 JS Fiddleファンの場合、例があります here

SOのコードを見たい人のために：

<div id="content">
<iframe src="http://www.Apple.com" 
        name="frame2" 
        id="frame2" 
        frameborder="0" 
        marginwidth="0" 
        marginheight="0" 
        scrolling="auto" 
        allowtransparency="false">
</iframe>

</div>

<div id="block"></div>

<div id="header"></div>

<div id="footer"></div>

CSS：

body {
margin: 0px;
padding-top: 78px;
padding-right: 0px;
padding-bottom: 25px;
padding-left: 0px;
min-height: 0px;
height: auto;
text-align: center;
background-color: lightblue;
overflow:hidden;
}

div#header {
top: 0px;
left: 0px;
width: 100%;
height: 85px;
min-width: 1000px;
overflow: hidden;
background-color: darkblue;
}

div#footer {
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
min-width: 1000px;
background-color: darkblue;
}

iframe#frame2 {

margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}

div#block {

background-color: lightgreen;
margin: 40px;
position: fixed;
top: 80px;
left: 350px;
width: 200px;
bottom: 25px;
min-width: 200px;
}

@media screen {
body > div#header {
position: fixed;
}
body > div#footer {
position: fixed;
}
}

そこには少し奇妙なCSSがあるかもしれません-実際のページからまとめました。謝罪。

ご覧のとおり、ウィンドウのサイズを変更すると、緑色のdivの高さが動的に変化します。私が知りたいのは、これがdivの左側にあるiframeで実行できるかどうかです。

CSSだけでこれを実現できますか？

javascriptcssiframeresizewindow
16
T9b

私は new jsfiddle を作成しました。これは生のCSSで必要なものを取得します。特にIEで、クロスブラウザーを広範囲にテストしませんでした。私はIE8と9でのサポートを予想しますが、7は問題なく動作するだろうと言うのをためらいます。

関連する変更：

    /* This contains the iframe and sets a new stacking context */
div#content {
    position: fixed;
    top: 80px;
    left: 40px;
    bottom: 25px;
    min-width: 200px;
    background: black; 
        /* DEBUG: If the iframe doesn't cover the whole space,
           it'll show through as black. */
}

    /* Position the iframe inside the new stacking context
       to take up the whole space */
div#content iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
19
Nick Husher

これはあなたが望んでいることだと思います。

最初にiframeをdivでラップし、iframeの幅と高さを100％に設定しました。

HTML

<div id="frameContainer"><iframe src="http://www.Apple.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe></div>

CSS

#frameContainer {

    margin: 40px;
    position: fixed;
    top: 80px;
    left: 0px;
    width: 200px;
    bottom: 25px;
    min-width: 200px;

}

iframe#frame2 { width: 100%; height:100% }

次に、次のjQueryコードを追加しました。

jsFiddle

$(function() {
    var widthRatio = $('#frameContainer').width() / $(window).width();
    $(window).resize(function() {
        $('#frameContainer').css({width: $(window).width() * widthRatio});
    }); 
});
7
Craig M

Iframe要素の幅と高さをパーセンテージベースに設定できます。幅が75％で、ブラウザウィンドウの幅を増減すると動的に変化する例を次に示します。 http://jsfiddle.net/fallen888/pkjEB/

2
Kon

これは私のために働きました：

div#content iframe {width: 100%}
1
md27