在 div 内安装 iframe [英] Fitting iframe inside a div

问题描述

我正在尝试将 iframe 放入 div 中.我的问题是我似乎无法让它嵌套到 div 宽度的 100%，我需要指定 iframe 的像素宽度.

我希望 iframe 位于 div 的内部"，这样如果 div 被较小的浏览器调整大小，iframe 也会调整大小.

这是我的代码:

<div class="span9" id="标准"><div class="header-box"><p class="header">Bla Bla Header</p>
<div id="包裹"><iframe id="frame" src="https://docs.google.com/a/...." frameborder="0"></iframe>

...

和 CSS:

#wrap {宽度:1130px；高度:100%；填充:0；溢出:隐藏；位置:相对；}

#frame {宽度:100%；高度:100%；边框:1px纯黑色；位置:相对；}#框架 {缩放:0.75；-moz 变换:比例(0.75)；-moz-transform-origin: 0 0;-o-变换:比例(0.75)；-o-transform-origin: 0 0;-webkit-transform: scale(0.75);-webkit-transform-origin: 0 0;}

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

解决方案

这个 CSS 会修复它吗?

iframe {显示:块；宽度:100%；}

来自这个例子:http://jsfiddle.net/HNyJS/2/show/

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.

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.

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:

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

Below is what happenswhen the browser is resized.

解决方案

Would this CSS fix it?

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

From this example: http://jsfiddle.net/HNyJS/2/show/

这篇关于在 div 内安装 iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！