Fitting iframe inside a div

Question

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.

Answer 1

Would this CSS fix it?

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

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

Answer 2

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/

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:

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