在 div 中安装 iframe答案

【问题标题】：Fitting iframe inside a div在 div 中安装 iframe
【发布时间】：2013-06-13 17:58:09
【问题描述】：

我正在尝试将 iframe 放入 div 中。我的问题是我似乎无法让它嵌套到 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>
   ...
</div>

还有 CSS：

#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;
}

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

【问题讨论】：

在此处查看答案：stackoverflow.com/questions/6634582/… 问题可能是因为您正在为 wrap div 定义精确的尺寸宽度
问题是，我不希望我的 div 有固定的位置。我为 wrap div 定义精确大小的原因是，当浏览器为正常大小时，pdf 可以完美地放入 div 中。照片显示了当我减小浏览器大小时会发生什么。

标签： css html layout iframe

【解决方案1】：

我认为我可能有一个更好的解决方案，可以在您的网站上嵌入完全响应的 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;
}

刚刚为一个客户做了这件事，它似乎正在工作：http://themilkrunsa.co.za/

【讨论】：

【解决方案2】：

这个 CSS 会修复它吗？

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

从这个例子：http://jsfiddle.net/HNyJS/2/show/

【讨论】：

哦，这救了我的网站。非常感谢！

【解决方案3】：

根据@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%;
}

【讨论】：