Html 在 div 内安装 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17153310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fitting iframe inside a div
提问by Julia
I am trying to fit an iframe inside a div. My problem is that I can't seem to get it to nest to 100% of the width of the div, I need to specify pixel width of the iframe.
我正在尝试将 iframe 放入 div 中。我的问题是我似乎无法让它嵌套到 div 宽度的 100%，我需要指定 iframe 的像素宽度。
I would like the iframe to be "inside" the div so that if the div is resized by a smaller browser, the iframe gets resized too.
我希望 iframe 位于 div 的“内部”，这样如果 div 被较小的浏览器调整大小，iframe 也会调整大小。
This is my code:
这是我的代码：
<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>
...
</div>
And CSS:
和 CSS：
#wrap { width: 1130px; height: 100%; padding: 0; overflow: hidden; position: relative; }
#wrap { 宽度：1130px; 高度：100%；填充：0；溢出：隐藏；位置：相对；}
#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;
}
Below is what happenswhen the browser is resized.
以下是调整浏览器大小时发生的情况。
回答by G-Cyrillus
Would this CSS fix it?
这个 CSS 会修复它吗？
iframe {
display:block;
width:100%;
}
From this example: http://jsfiddle.net/HNyJS/2/show/
从这个例子：http: //jsfiddle.net/HNyJS/2/show/
回答by orlenko
Based on the link provided by @better_use_mkstemp, here's a fiddle where nested iframe resizes to fill parent div: http://jsfiddle.net/orlenko/HNyJS/
基于@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>
Relevant parts of CSS:
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%;
}
回答by Bernard Myburgh
I think I may have a better solution for having a fully responsive iframe (a vimeo video in my case) embed on your site. Nest the iframe in a div. Give them the following styles:
我想我可能有一个更好的解决方案，可以在您的网站上嵌入一个完全响应的 iframe（在我的例子中是一个 vimeo 视频）。将 iframe 嵌套在 div 中。给他们以下样式：
div {
width: 100%;
height: 0;
padding-bottom: 56%; /* Change this till it fits the dimensions of your video */
position: relative;
}
div iframe {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
Just did it now for a client, and it seems to be working: http://themilkrunsa.co.za/
现在刚刚为客户做了，它似乎正在工作：http: //themilkrunsa.co.za/
