Colocando iframe dentro de un div

Estoy tratando de encajar un iframe dentro de un div. Mi problema es que parece que no puedo anidar al 100% del ancho del div, necesito especificar el ancho de píxel del iframe.

Me gustaría que el iframe esté “dentro” del div, de modo que si un navegador más pequeño cambia el tamaño del div, el iframe también se redimensiona.

Este es mi código:

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

Y CSS:

#envolver { ancho: 1130px; altura: 100%; relleno: 0; desbordamiento: oculto; posición: relativa; }

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

A continuación se muestra lo que sucede cuando se cambia el tamaño del navegador.

¿Este CSS lo arreglaría?

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

De este ejemplo: http://jsfiddle.net/HNyJS/2/show/

Basado en el enlace proporcionado por @better_use_mkstemp, aquí hay un violín donde el iframe anidado cambia de tamaño para llenar el div principal: 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>

Partes relevantes de 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%;
}

Creo que puedo tener una mejor solución para tener un iframe totalmente receptivo (un video de vimeo en mi caso) incrustado en su sitio. Anide el iframe en un div. Dales los siguientes estilos:

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