Dopasowywanie iframe wewnątrz div

Question

Próbuję dopasować element iframe wewnątrz elementu div. Mój problem polega na tym, że nie mogę sprawić, żeby zagnieździł się do 100% szerokości div, muszę określić szerokość piksela elementu iframe.

Chciałbym, aby element iframe był "wewnątrz" elementu div, więc jeśli rozmiar div zostanie zmieniony przez mniejszą przeglądarkę, rozmiar elementu iframe również zostanie zmieniony.

To jest mój kod:

<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> 
(more things in the row) 
</div> 

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

}

Poniżej jest co happenswhen przeglądarka jest zmieniany.

Answer 1

Bazując na link podany przez @better_use_mkstemp, oto skrzypce gdzie zagnieżdżonych iframe zmienia rozmiar, aby wypełnić rodzic 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> 

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

Answer 2

Czy ten CSS to naprawi?

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

Z tego przykładu: http://jsfiddle.net/HNyJS/2/show/

Answer 3

myślę mogę mieć lepsze rozwiązanie posiadające w pełni elastyczne iframe (a wideo vimeo w moim przypadku) osadzić na swojej stronie. Wstaw element iframe do elementu div. Daj im następujące style:

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

Podobnie zrobił to teraz dla klienta, i wydaje się działać: http://themilkrunsa.co.za/