将iframe适配到一个div中

Question

我试图将一个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 { 宽度：1130像素; 高度：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;
}

当浏览器大小调整时，发生的情况如下所示。

- Julia

---

请查看这里的答案：https://dev59.com/MGw15IYBdhLWcg3wZ68Y 问题很可能是因为您为wrap div定义了一个精确的宽度大小。 - Display Name is missing

问题是，我不想让我的div具有固定的位置。我定义包装div的确切大小的原因是当浏览器处于正常大小时，pdf可以完美地适应div内部。当我缩小浏览器大小时，照片显示了发生的情况。 - Julia

Answer 1

这个CSS能修复它吗？

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

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

- G-Cyrillus

---

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

Answer 2

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

- orlenko

Answer 3

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

- Bernard Myburgh