在div中安装iframe

时间:2013-06-17 17:25:50

标签: css html layout iframe

我正在尝试在div中安装iframe。我的问题是我似乎无法将其嵌套到div的100%宽度,我需要指定iframe的像素宽度。

我希望iframe位于div的“内部”,这样如果div被较小的浏览器调整大小,iframe也会调整大小。

这是我的代码:

<div class="row-fluid">
    <div class="span9" id="standard">
        <div class="header-box">
        <p class="header" >Bla Bla Header</p>
        </div>
        <div id="wrap">
    <iframe id="frame" src="https://docs.google.com/a/...."frameborder="0"></iframe>
        </div>
        </div>
(more things in the row)
</div>

和CSS:

#wrap { width: 1130px; height: 100%; padding: 0; 
        overflow: hidden; position:relative;}
#frame { width: 100%; height: 100%; 
        border: 1px solid black; position:relative; }
#frame {
zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;

}

以下是浏览器调整大小时发生的情况。 enter image description here

3 个答案:

答案 0 :(得分:19)

这个CSS会修复吗?

iframe {
    display:block;
    width:100%;
}

从此示例中:http://jsfiddle.net/HNyJS/2/show/

答案 1 :(得分:7)

根据@better_use_mkstemp提供的链接,这里有一个小提琴,其中嵌套的iframe调整大小以填充父div:http://jsfiddle.net/orlenko/HNyJS/

HTML:

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

CSS的相关部分:

div#content {
    position: fixed;
    top: 80px;
    left: 40px;
    bottom: 25px;
    min-width: 200px;
    width: 40%;
    background: black;
}

div#content iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

答案 2 :(得分:4)

我想我可能有一个更好的解决方案,可以在您的网站上嵌入完全响应的iframe(在我的情况下是一个vimeo视频)。将iframe嵌入div中。给他们以下样式:

boolean

现在就为客户做了,它似乎正在运作:http://themilkrunsa.co.za/