web-dev-qa-db-fra.com

Comment redimensionner Iframe lorsque la fenêtre parente redimensionne

Je ne pense pas que ce n'est pas une autre "redimensionner iframe selon la hauteur du contenu".

En fait, je veux réellement redimensionner l'iframe de manière dynamique en fonction d'un redimensionnement de la fenêtre mère. Pour JS Fiddle fans, j'ai un exemple ici

Pour ceux qui veulent regarder le code sur SO:

<div id="content">
<iframe src="http://www.Apple.com" 
        name="frame2" 
        id="frame2" 
        frameborder="0" 
        marginwidth="0" 
        marginheight="0" 
        scrolling="auto" 
        allowtransparency="false">
</iframe>

</div>

<div id="block"></div>

<div id="header"></div>

<div id="footer"></div>

CSS:

body {
margin: 0px;
padding-top: 78px;
padding-right: 0px;
padding-bottom: 25px;
padding-left: 0px;
min-height: 0px;
height: auto;
text-align: center;
background-color: lightblue;
overflow:hidden;
}

div#header {
top: 0px;
left: 0px;
width: 100%;
height: 85px;
min-width: 1000px;
overflow: hidden;
background-color: darkblue;
}

div#footer {
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
min-width: 1000px;
background-color: darkblue;
}

iframe#frame2 {

margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}

div#block {

background-color: lightgreen;
margin: 40px;
position: fixed;
top: 80px;
left: 350px;
width: 200px;
bottom: 25px;
min-width: 200px;
}

@media screen {
body > div#header {
position: fixed;
}
body > div#footer {
position: fixed;
}
}

Il peut y avoir un peu de CSS impair là-bas - je l'ai franchi de la page réelle. Excuses.

Comme vous pouvez le voir, la DIV de couleur verte change de manière dynamique la hauteur en conséquence lorsque vous redimensionnez la fenêtre. Ce que j'aimerais savoir, c'est si cela peut être fait avec l'iframe à gauche de la DIV.

CSS peut-il seul faire cela arriver?

javascriptcssiframeresizewindow
16
T9b

Je pense que cela fait ce que vous êtes après.

D'abord, j'ai enveloppé l'iframe dans un div et définir la largeur et la hauteur de l'iframe à 100%.

Html

<div id="frameContainer"><iframe src="http://www.Apple.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe></div>

CSS

#frameContainer {

    margin: 40px;
    position: fixed;
    top: 80px;
    left: 0px;
    width: 200px;
    bottom: 25px;
    min-width: 200px;

}

iframe#frame2 { width: 100%; height:100% }

Ensuite, j'ai ajouté le code JQuery suivant.

jsfiddle

$(function() {
    var widthRatio = $('#frameContainer').width() / $(window).width();
    $(window).resize(function() {
        $('#frameContainer').css({width: $(window).width() * widthRatio});
    }); 
});
7
Craig M

Vous pouvez définir la largeur et la hauteur de l'élément iframe pour être en pourcentage. Voici un exemple où la largeur est de 75% et changera de manière dynamique lorsque vous augmentez/diminuez la largeur de votre fenêtre de navigateur: http://jsfiddle.net/fallen888/pkjeb/

2
Kon

Cela a fonctionné pour moi:

div#content iframe {width: 100%}
1
md27