dongyou2635
2011-07-09 11:58
浏览 393

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

I don't think this is not another "resize iframe according to content height" question.

I actually want to resize the iframe dynamically according to a resize of the parent window. For JS Fiddle fans I have an example here

For those who want to look at the code on 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;
}
}

There may be a bit of odd CSS there - I cobbled it together from the actual page. Apologies.

As you can see the green coloured div dynamically changes height accordingly when you resize the window. What I'd like to find out is if this can be done with the iframe to the left of the div.

Can CSS alone make this happen?

图片转代码服务由CSDN问答提供 功能建议

我不认为这不是另一个“根据内容高度重新调整iframe”的问题。 \ n

我实际上想根据父窗口的大小调整动态调整iframe的大小。 对于JS Fiddle粉丝,我有一个例子这里

对于那些想要的人 查看SO上的代码:

 &lt; div id =“content”&gt; 
&lt; iframe src =“http://www.apple.com”\  n name =“frame2”
 id =“frame2”
 frameborder =“0”
 marginwidth =“0”
 marginheight =“0”
 scrolling =“auto”
 allowtransparency =“false”&gt;  
&lt; / iframe&gt; 
 
&lt; / div&gt; 
 
&lt; div id =“block”&gt;&lt; / div&gt; 
 
&lt; div id =“header”&gt;&lt; / div&gt;  
 
&lt; div id =“footer”&gt;&lt; / div&gt; 
   
 
 

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:0p  x; 
left:0px; 
width:100%; 
height:25px; 
min-width:1000px; 
background-color:darkblue; 
} 
 
iframe#frame2 {
 
margin:40px; \  nposition: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  &GT;  div#header {
position:fixed; 
} 
body&gt;  div#footer {
position:fixed; 
} 
} 
   
 
 

那里可能有一些奇怪的CSS - 我从实际的页面拼凑了一下 。 道歉。

正如您所看到的,当您调整窗口大小时,绿色div会相应地动态改变高度。 我想知道的是,如果可以使用div左边的iframe来完成。

CSS可以单独实现吗?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • dou7466 2011-07-15 20:11
    已采纳

    I created a new jsfiddle that gets you what you need in raw css. I didn't test cross-browser extensively, particularly in IE. I would anticipate support in IE8 and 9, but would be hesitant to say that 7 would work without hiccups.

    The relevant changes:

        /* 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%;
    }
    
    已采纳该答案
    打赏 评论
  • douji6735 2011-07-09 12:03

    You can set the width and height of the iframe element to be percentage-based. Here's an example where width is 75% and will dynamically change when you increase/decrease the width of your browser window: http://jsfiddle.net/fallen888/pkjEB/

    打赏 评论
  • doubang4881 2011-07-15 18:36

    I think this does what you're after.

    First I wrapped the iframe in a div, and set the iframe's width and height to be 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% }
    

    Then I added the following jQuery code.

    jsFiddle

    $(function() {
        var widthRatio = $('#frameContainer').width() / $(window).width();
        $(window).resize(function() {
            $('#frameContainer').css({width: $(window).width() * widthRatio});
        }); 
    });
    
    打赏 评论
  • douqian2524 2015-03-12 10:49

    This worked for me:

    div#content iframe {width: 100%} 
    
    打赏 评论

相关推荐 更多相似问题