首页 文章

父窗口调整大小时如何调整iframe大小

提问于
浏览 次
13

我不认为这不是另一个“根据内容高度重新调整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可以单独实现吗？

javascript css iframe resize window

4 回答

  • 1

    我创建了一个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%;
}
    回复于
  • 7

    我认为这就是你所追求的 .

    首先，我将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});
    }); 
});
    回复于
  • 2

    您可以将iframe元素的宽度和高度设置为基于百分比 . 下面是宽度为75％的示例，当您增加/减少浏览器窗口的宽度时，它将动态更改：http://jsfiddle.net/fallen888/pkjEB/

    回复于
  • 18

    这对我有用：

    div#content iframe {width: 100%}
    回复于

相关问题