Iframe in ein div einfügen

Ich versuche, einen iframe in ein div einzupassen. Mein Problem ist, dass ich es anscheinend nicht dazu bringen kann, 100% der Breite des div zu verschachteln. Ich muss die Pixelbreite des iframe angeben.

Ich möchte, dass sich der iframe “innerhalb” des div befindet, sodass bei einer Größenänderung des div durch einen kleineren Browser auch die Größe des iframe geändert wird.

Das ist mein 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>

Und CSS:

#wrap {Breite: 1130px; Höhe: 100 %; Polsterung: 0; Überlauf versteckt; Position: relativ; }

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

Unten sehen Sie, was passiert, wenn die Größe des Browsers geändert wird.

Würde dieses CSS es beheben?

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

Aus diesem Beispiel: http://jsfiddle.net/HNyJS/2/show/

Basierend auf dem von @better_use_mkstemp bereitgestellten Link ist hier eine Geige, bei der verschachtelte Iframes die Größe ändern, um das übergeordnete div zu füllen: 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>

Relevante Teile von 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%;
}

Ich denke, ich habe vielleicht eine bessere Lösung, um einen voll responsiven Iframe (in meinem Fall ein Vimeo-Video) auf Ihrer Website einzubetten. Verschachteln Sie den Iframe in einem div. Geben Sie ihnen die folgenden Stile:

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