Сделайте Iframe равным 100% оставшейся емкости контейнера

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

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

Заметки по обновлению. Извините меня за то, что я не очень хорошо описывал вопрос, я пробовал атрибут CSS, атрибут padding на 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>

ОТВЕТЫ

Ответ 1

Трюк заключается в том, чтобы понять, что 100% принято. Чтение спецификаций CSS может помочь вам там.

Короче говоря, существует такая вещь, как "содержащий блок", который не является необходимым родительским элементом. Проще говоря, это первый элемент иерархии, который имеет положение: относительное или положение: абсолютное. Или сам элемент тела, если нет ничего другого. Итак, когда вы говорите "width: 100%", он проверяет ширину "содержащего блока" и устанавливает ширину вашего элемента в том же размере. Если бы там было что-то еще, тогда вы могли бы получить содержимое "содержащего блока", которое больше самого (таким образом, "переполнено" ).

Высота работает одинаково. За одним исключением. Вы не можете получить высоту до 100% окна браузера. Элементом самого верхнего уровня, на который можно вычислить 100%, является элемент body (или html? Not sure), и он достаточно растягивается, чтобы содержать его содержимое. Указание высоты: 100% на нее не будет иметь никакого эффекта, потому что у нее нет "родительского элемента", для которого нужно измерить 100%. Само окно не учитывается.;)

Чтобы что-то растянуть ровно на 100% окна, у вас есть два варианта:

  1. Использовать JavaScript
  2. Не используйте DOCTYPE. Это не очень хорошая практика, но она помещает браузеры в режим "quirks", в котором вы можете сделать height = "100%" на элементах, и это растянет их до размера окна. Обратите внимание, что остальная часть вашей страницы, вероятно, также должна быть изменена для размещения изменений DOCTYPE.

Обновление: Я не уверен, что уже не ошибся, когда я разместил это, но это, безусловно, устарело. Сегодня вы можете сделать это в своей таблице стилей: html, body { height: 100% }, и это будет фактически растягиваться на весь ваш видовой экран. Даже с DOCTYPE. min-height: 100% также может быть полезен, в зависимости от вашей ситуации.

И я больше не советовал бы кому-либо создавать документ в режиме quirks mode, потому что он вызывает больше головных болей, чем решает их. У каждого браузера есть другой режим причудливости, поэтому заставить вашу страницу выглядеть последовательно в браузерах становится на два порядка сложнее. Используйте DOCTYPE. Всегда. Предпочтительно HTML5 один - <!DOCTYPE html>. Это легко запомнить и работает как шарм во всех браузерах, даже 10-летних.

Единственное исключение - когда вы должны поддерживать что-то вроде IE5 или что-то в этом роде. Если вы там, тогда вы сами по себе. Эти древние браузеры сегодня не похожи на браузеры, и небольшой совет, который дается здесь, поможет вам с ними. С яркой стороны, если вы там, вы, вероятно, просто должны поддерживать ОДИН вид браузера, который избавляется от проблем совместимости.

Удачи!

Обновление 2: Эй, это было давно! 6 лет спустя на сцене появляются новые варианты. Я только что обсуждал в комментариях ниже, вот больше трюков для вас, которые работают в сегодняшних браузерах.

Вариант 1 - абсолютное позиционирование. Приятный и чистый, когда вы знаете точную высоту первой части.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<div class="second-row">
  <iframe src="https://jsfiddle.net/about"></iframe>
</div>

Ответ 2

Мы используем JavaScript для решения этой проблемы; вот источник.

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

Примечание: ifm - идентификатор iframe

pageY() был создан Джоном Ресигом (автором jQuery)

Ответ 3

Другой способ сделать это - использовать position: fixed; в родительском node.
Если я не ошибаюсь, position: fixed; связывает элемент с viewport, таким образом, как только вы дадите свойства node width: 100%; и height: 100%;, он будет охватывать весь экран. С этого момента вы можете поместить в него тег <iframe> и охватить его по оставшемуся пространству (как по ширине, так и по высоте) с помощью простой инструкции width: 100%; height: 100%; CSS.

Пример кода

    body {
        margin: 0px;
        padding: 0px;
    }

    /* iframe parent node */
    div#root {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* iframe itself */
    div#root > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
   <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <div id="root">
                <iframe src="http://stackoverflow.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>

Ответ 4

Вы можете сделать это с помощью DOCTYPE, но вы должны использовать table. Проверьте это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>

Ответ 5

Вот несколько современных подходов:

  • Подход 1 - Сочетание относительных единиц просмотра/calc().

    Выражение calc(100vh - 30px) представляет собой оставшуюся высоту. Где 100vh - высота браузера, а использование calc() эффективно смещает высоту другого элемента.

    Пример здесь

    body {
    margin: 0;
}
.banner {
    background: #f00;
    height: 30px;
}
iframe {
    display: block;
    background: #000;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}
    <div class="banner"></div>
<iframe></iframe>

Ответ 6

Возможно, на это уже был дан ответ (несколько ответов выше - "правильные" способы сделать это), но я думал, что просто добавлю свое решение.

Наш iFrame загружается внутри div, поэтому мне нужно что-то еще, а затем window.height. И, увидев, что наш проект уже в значительной степени зависит от jQuery, я считаю это самым элегантным решением:

$("iframe").height($("#middle").height());

Где, конечно, "#middle" - это идентификатор div. Единственное, что вам нужно сделать, это восстановить это изменение размера, когда пользователь изменит размер окна.

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});

Ответ 7

Код MichAdel работает для меня, но я сделал некоторые незначительные изменения, чтобы заставить его работать правильно.

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
    var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;

Ответ 8

Вот что я сделал. У меня была такая же проблема и в течение часа я искал в Интернете ресурсы.

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

Я добавил это в раздел главы.

Обратите внимание, что мой iframe находится внутри средней ячейки таблицы, которая имеет 3 строки и 1 столбец.

Ответ 9

попробуйте следующее:

<iframe name="" src="" width="100%" style="height: 100em"/>

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

Ответ 10

Вы можете сделать это с помощью html/css следующим образом:

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

Ответ 11

Правильно, вы показываете iframe со 100% -ной высотой относительно своего контейнера: тело.

Попробуйте следующее:

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

Конечно, измените высоту второго div на нужную вам высоту.

Ответ 12

Новое в HTML5: Используйте calc (по высоте)

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

Ответ 13

Я использовал display: table, чтобы исправить аналогичную проблему. Это почти работает для этого, оставляя небольшую вертикальную полосу прокрутки. Если вы пытаетесь заполнить этот гибкий столбец чем-то иным, чем iframe, он отлично работает (не

Возьмите следующий HTML

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

Измените внешний div для использования display: table и убедитесь, что он имеет ширину и высоту.

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

Сделайте баннер таблицей-строкой и установите ее высоту в соответствии с вашими предпочтениями:

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

Добавьте дополнительный div вокруг вашего iframe (или любого другого контента, который вам нужен), и сделайте его табличной строкой с высотой, установленной на 100% (установка его высоты имеет решающее значение, если вы хотите встроить iframe для заполнения высоты)

.iframe-container {
  display: table-row;
  height: 100%;
}

Ниже приведен jsfiddle, показывающий его на работе (без iframe, потому что это не работает на скрипке)

https://jsfiddle.net/yufceynk/1/

Ответ 14

Я думаю, у вас есть концептуальная проблема. Чтобы сказать: "Я попытался установить высоту: 100% на iframe, результат довольно близок, но iframe попытался заполнить всю страницу", ну, когда "100%" не было равно "целому"?

Вы запросили iframe, чтобы заполнить всю высоту своего контейнера (который является телом), но, к сожалению, у него есть дочерний уровень уровня блока в <div> выше которого вы просили увеличить 30px. Таким образом, общая сумма основного контейнера теперь запрашивается до 100% + 30px > 100%! Следовательно, полосы прокрутки.

Я думаю, что вы имеете в виду, что вы хотите, чтобы iframe потреблял то, что осталось от фреймов и ячеек таблицы, т.е. height = "*". IIRC этого не существует.

К сожалению, насколько мне известно, нет возможности эффективно смешивать/вычислять/вычитать абсолютные и относительные единицы, поэтому я думаю, что вы сведены к двум параметрам:

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

  • В качестве альтернативы вам необходимо указать % высоты для div и уменьшить высота iframe на столько. Если абсолютная высота действительно это важно, что вам нужно применить что дочернему элементу div вместо этого.

Ответ 15

Попробовав css-маршрут некоторое время, я в конечном итоге написал что-то довольно простое в jQuery, которое выполняло эту работу для меня:

function iframeHeight() {
    var newHeight = $j(window).height();
    var buffer = 180;     // space required for any other elements on the page 
    var newIframeHeight = newHeight - buffer;
    $j('iframe').css('height',newIframeHeight);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}

// When DOM ready
$(function() {
    window.onresize = iframeHeight;
}

Протестировано в IE8, Chrome, Firefox 3.6

Ответ 16

Подобный ответ @MichAdel, но я использую JQuery и более элегантный.

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id - это идентификатор тега iframe

Ответ 17

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

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

Ответ 18

или вы можете пойти в старую школу и использовать frameset, возможно:

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>

Ответ 19

В то время как я согласен, что JS кажется лучшим вариантом, у меня есть только работающее решение только для CSS. Недостатком этого является то, что если вам нужно часто добавлять контент в свой файл iframe html, вам придется адаптировать одно процентное время.

Решение:

Попробуйте не указывать любую высоту для BOTH ваших html-документов,

html, body, section, main-div {}

то только код:

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

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

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

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

Ответ 20

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

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

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

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

Ответ 21

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

Используйте это в script на странице 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();
    }

}

Ответ 22

вы не можете установить высоту 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>

Ответ 23

Он будет работать с указанным ниже кодом

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>

Ответ 24

Если у вас есть доступ к содержимому iframe, который будет загружен, вы можете указать его родительскому объекту изменять размер при каждом изменении размера.

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

Если у вас есть более одного iframe на странице, вам может понадобиться использовать id или другие умные методы для повышения .find( "iframe" ), чтобы вы выбрали правильный.

Ответ 25

Я думаю, что лучший способ достичь этого сценария с использованием позиции css. установите положение относительно вашего родительского div и позиции: абсолютное значение для вашего iframe.

.container{
  width:100%;
  position:relative;
  height:500px;
}

iframe{
  position:absolute;
  width:100%;
  height:100%;
}
<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>

Ответ 26

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

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>