web-dev-qa-db-fra.com

Montage de l'iframe à l'intérieur d'un div

J'essaie d'intégrer un iframe à l'intérieur d'un div. Mon problème est que je n'arrive pas à le faire s'emboîter à 100% de la largeur de la div, je dois spécifier la largeur de pixel de l'iframe.

Je voudrais que l'iframe soit "à l'intérieur" du div afin que si le div est redimensionné par un petit navigateur, l'iframe soit redimensionné aussi.

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

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

}

Voici ce qui se passe lorsque le navigateur est redimensionné. enter image description here

csshtmllayoutiframe
20
Julia

Ce CSS le corrigerait-il?

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

De cet exemple: http://jsfiddle.net/HNyJS/2/show/

22
G-Cyr

Basé sur le lien fourni par @better_use_mkstemp, voici un violon où l'iframe imbriquée se redimensionne pour remplir la div parent: 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>

Parties pertinentes 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%;
}
7
orlenko

Je pense que j'ai peut-être une meilleure solution pour avoir une iframe entièrement réactive (une vidéo vimeo dans mon cas) incorporée sur votre site. Imbriquez l'iframe dans une div. Donnez-leur les styles suivants:

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

Je viens de le faire maintenant pour un client, et cela semble fonctionner: http://themilkrunsa.co.za/

5
Bernard Myburgh