Сделайте Iframe, чтобы соответствовать 100% оставшейся высоты контейнера - PullRequest
Новая
       34

Сделайте Iframe, чтобы соответствовать 100% оставшейся высоты контейнера

219 голосов
/ 28 ноября 2008

Я хочу создать веб-страницу с баннером и фреймом. Я надеюсь, что iframe может заполнить всю оставшуюся высоту страницы и будет автоматически изменен по мере изменения размера браузера. Возможно ли это сделать без написания кода Javascript, только с помощью CSS?

Я попытался установить height:100% в iframe, результат довольно близок, но iframe попытался заполнить всю высоту страницы, включая 30px высоту элемента div баннера, поэтому я получил ненужную вертикальную полосу прокрутки. Это не идеально.

Обновление примечаний : Извините, что я не очень хорошо описал вопрос, я попробовал CSS margin, padding attribute в DIV, чтобы успешно занять всю высоту напоминания веб-страницы, но уловка не сработала IFrame. 

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>

Любая идея приветствуется.

Ответы [ 26 ]

0 голосов
/ 10 июля 2014

Простое решение jQuery

Используйте это в скрипте внутри страницы iframed 

$(function(){

    if(window != top){
        var autoIframeHeight = function(){
            var url = location.href;
            $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
        }
        $(window).on('resize',autoIframeHeight);
        autoIframeHeight();
    }

}
0 голосов
/ 06 октября 2013

Атрибут " seamless " - это новый стандарт, призванный решить эту проблему:

http://www.w3schools.com/tags/att_iframe_seamless.asp

При назначении этого атрибута он удалит границы и полосы прокрутки и изменит размер фрейма в соответствии с его размером. хотя поддерживается только в Chrome и последних версиях Safari

подробнее об этом здесь: Бесшовные атрибут HTML5 iFrame

0 голосов
/ 18 апреля 2013

Хотя я согласен, что JS кажется лучшим вариантом, у меня есть несколько работающее решение только для CSS. Недостатком является то, что если вам часто приходится добавлять контент в ваш HTML-документ iframe, вам придется адаптировать один процентный период времени.

Решение:

Попробуйте без указания любой высоты ОБА для ваших HTML-документов, 

html, body, section, main-div {}

, тогда только код это: 

#main-div {height:100%;}
#iframe {height:300%;}

примечание: div должен быть вашим основным разделом.

Это должно работать относительно. iframe точно рассчитывает 300% высоты видимого окна. Если html-контент из 2-го документа (в iframe) меньше по высоте, чем в 3 раза больше высоты браузера, это работает. Если вам не нужно часто добавлять контент в этот документ, это постоянное решение, и вы можете просто найти свой собственный необходимый% в зависимости от высоты вашего контента.

Это работает, потому что предотвращает наследование 2-го html-документа (который встраивается) в его высоту от родительского html-документа. Это предотвращает это, потому что мы не указали высоту для них обоих. Когда мы даем% дочернему элементу, он ищет своего родителя, если нет, он принимает высоту содержимого. И только если другие контейнеры не имеют высоты, из того, что я пробовал.

0 голосов
/ 28 ноября 2008

Это можно сделать, измерив размер тела при событиях загрузки / изменения размера и установив высоту (полная высота - высота баннера).

Обратите внимание, что в настоящее время в IE8 Beta2 вы не можете сделать это по размеру, так как это событие в настоящее время прерывается в IE8 Beta2.

0 голосов
/ 25 февраля 2017

Почему бы не сделать это (с незначительной корректировкой для заполнения тела / полей) 

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
0 голосов
/ 19 августа 2014

вы не можете установить высоту iframe в%, потому что ваш родительский рост не равен 100%, поэтому установите родительский рост равным 100%, а затем примените высоту iframe 100% 

For eg.
<html>
<head>
<style>
html,body{height:100%}
</style> 
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...