Как изменить размер iframe при изменении размера родительского окна

Я не думаю, что это еще один вопрос «изменить размер iframe в соответствии с высотой содержимого».

Я действительно хочу динамически изменять размер iframe в соответствии с изменением размера родительского окна. Для поклонников JS Fiddle у меня есть пример здесь

Для тех, кто хочет посмотреть код на 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;
}
}

Там может быть немного странного CSS - я собрал его из реальной страницы. Извинения.

Как видите, div зеленого цвета динамически изменяет высоту соответственно при изменении размера окна. Я хотел бы узнать, можно ли это сделать с помощью iframe слева от div.

Может ли только CSS сделать это возможным?


javascript iframe css window resize
person T9b    schedule 09.07.2011    source источник
comment
Ваша ссылка JsFiddle не работает.   -  person Guffa    schedule 09.07.2011
comment
Спасибо, исправил. Ссылка JSFiddle теперь должна работать ...   -  person T9b    schedule 09.07.2011

Ответы (4)


arrow_upward
19
arrow_downward

Я создал новый jsfiddle, который дает вам то, что вам нужно, в необработанном CSS. Я не тестировал кроссбраузерно, особенно в IE. Я ожидал бы поддержки в IE8 и 9, но не решился бы сказать, что 7 будет работать без сбоев.

Соответствующие изменения:

    /* This contains the iframe and sets a new stacking context */
div#content {
    position: fixed;
    top: 80px;
    left: 40px;
    bottom: 25px;
    min-width: 200px;
    background: black; 
        /* DEBUG: If the iframe doesn't cover the whole space,
           it'll show through as black. */
}

    /* Position the iframe inside the new stacking context
       to take up the whole space */
div#content iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
person Nick Husher    schedule 15.07.2011

arrow_upward
7
arrow_downward

Я думаю, это то, что вам нужно.

Сначала я обернул iframe в div и установил ширину и высоту 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% }

Затем я добавил следующий код jQuery.

jsFiddle

$(function() {
    var widthRatio = $('#frameContainer').width() / $(window).width();
    $(window).resize(function() {
        $('#frameContainer').css({width: $(window).width() * widthRatio});
    }); 
});
person Craig M    schedule 15.07.2011
comment
Это тоже сработало, но я выбрал другой ответ, потому что это был чистый CSS, но я признал, что использование JQuery, вероятно, способствует совместимости. - person T9b; 16.07.2011
comment
Для меня (просто тестирую jsFiddles) это единственный вариант из двух, который работал даже в Chrome. - person user456584; 21.01.2013

arrow_upward
2
arrow_downward

Вы можете установить ширину и высоту элемента iframe в процентах. Вот пример, где ширина составляет 75% и будет динамически изменяться при увеличении / уменьшении ширины окна браузера: http://jsfiddle.net/fallen888/pkjEB/

person Kon    schedule 09.07.2011
comment
Это не ответ. Мне нужно, чтобы он вел себя как div, называемый block в примере. Верхний и нижний края этого div всегда находятся на одинаковом расстоянии в пикселях от верхнего и нижнего края. Это не то же самое, что установить возраст элемента в% от роста. - person T9b; 09.07.2011

arrow_upward
1
arrow_downward

Это сработало для меня:

div#content iframe {width: 100%}
person md27    schedule 12.03.2015