25

我正在尝试将 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;
}

以下是调整浏览器大小时发生的情况。 在此处输入图像描述

4

3 回答 3

32

这个 CSS 会修复它吗？

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

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

于 2013-06-17T18:20:46.893 回答
10

根据@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%;
}
于 2013-06-17T17:59:55.113 回答
8

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

于 2017-01-15T10:17:41.157 回答