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

260

Я хочу создать веб-страницу с баннером и фреймом. Я надеюсь, что 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>
Развернуть фрагмент

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

html css iframe Darkthread
источник

Ответы:

236

Обновление в 2019 году

TL; DR: сегодня лучший вариант - последний в этом ответе - flexbox. Все это поддерживает хорошо и уже много лет. Сделай это и не оглядывайся назад. Остальная часть этого ответа оставлена ​​по историческим причинам.

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

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

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

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

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

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

И я бы не советовал никому больше делать документ в режиме причуд , потому что это вызывает гораздо больше головных болей, чем решает их. В каждом браузере есть свой причудливый режим, поэтому заставить вашу страницу выглядеть одинаково во всех браузерах на два порядка сложнее. Используйте 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>
Развернуть фрагмент

Некоторые примечания - second-rowконтейнер необходим , потому что bottom: 0и right: 0не работает на фреймов по какой - то причине. Что-то связанное с тем, чтобы быть "замененным" элементом. Но width: 100%и height: 100%работает просто отлично. display: blockнеобходим, потому что это inlineэлемент по умолчанию, и в противном случае пробелы начинают создавать странные переполнения.

Вариант 2 - таблицы. Работает, когда вы не знаете высоту первой части. Вы можете использовать либо реальные <table>теги, либо сделать это причудливым способом display: table. Я пойду на последнее, потому что это, кажется, в моде в эти дни.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
  <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>
</div>
Развернуть фрагмент

Некоторые примечания - overflow: autoгарантирует, что строка всегда включает в себя все свое содержимое. В противном случае плавающие элементы могут иногда переполняться. height: 100%На втором ряду убеждается он расширяется настолько , насколько это может выдавливание первого ряда , как малые , как он получает.

Вариант 3 - флексбокс. Самый чистый из них, но с менее чем звездной поддержкой браузера. IE10 понадобятся -ms-префиксы для свойств flexbox, и ничто меньшее не будет поддерживать его вообще.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Развернуть фрагмент

Некоторые замечания - overflow: hiddenэто потому, что iframe по-прежнему генерирует какое-то переполнение даже display: blockв этом случае. Он не виден в полноэкранном режиме или в редакторе фрагментов, но небольшое окно предварительного просмотра получает дополнительную полосу прокрутки. Понятия не имею, что это такое, фреймы странные.

Vilx-
источник
@sproketboy Ну, это рекомендация W3C. И это даже не самое худшее, не так уж далеко.
Джон
Таким образом, мы помещаем это в таблицу стилей страницы IFrame или в таблицу стилей родительской страницы, которая содержит IFrame?
Матиас Ликкегор Лоренцен
1
Это здорово, спасибо! Flexbox действительно самый чистый, но таблицы также хороши для изучения и, кажется, работают без переполнений: jsfiddle.net/dmitri14/1uqh3zgx/2
Дмитрий Зайцев,
1
Возможно, стоит перенести последние обновления в начало этого ответа. Мне пришлось пройти через все это, чтобы найти лучший ответ, flexbox.
прощение с
2
@forgivenson - Достаточно верно. Добавлена ​​заметка в начале этого ответа.
Vilx-
68

Мы используем 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)

MichAdel
источник
50

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

Пример кода

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

    /* iframe's 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>
Развернуть фрагмент

D1SoveR
источник
1
Как это принимает "оставшуюся" высоту ..?
EricG
3
Я заметил, что вы также должны добавить position: fixedв iframe.
0xF
спасибо, исправил мой рост в отчете SSRS, самоубийство было предотвращено еще на один день.
Майк Д
1
полос прокрутки не видно
andrej
идеально - не могли бы вы объяснить css '>', например, div # root> iframe furtheras Я не знаком с ним и не могу найти ссылку
Datadimension
40

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

  • Подход 2 - подход Flexbox

    Пример здесь

    Установите displayдля общего родительского элемента значение flexвместе с flex-direction: column(при условии, что вы хотите, чтобы элементы располагались друг над другом). Затем установите flex-grow: 1дочерний iframeэлемент, чтобы он заполнил оставшееся пространство.

    body {
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.parent .banner {
    background: #f00;
    width: 100%;
    height: 30px;
}
.parent iframe {
    background: #000;
    border: none;
    flex-grow: 1;
}
    <div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>
    Развернуть фрагмент

    Поскольку этот подход имеет меньшую поддержку 1 , я бы предложил использовать вышеупомянутый подход.

1 Хотя кажется, что он работает в Chrome / FF, он не работает в IE (первый метод работает во всех современных браузерах).

Джош Крозье
источник
3
И работа, и IMO - два варианта, упомянутые здесь, являются наилучшим подходом. Я предпочитаю flexboxвариант, потому что calcвам нужно знать количество места, чтобы вычесть из vh. С flexboxпомощью простого flex-grow:1это делает.
Kilmazing
39

Вы можете сделать это с 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>
Ducu
источник
1
по крайней мере, это не нужно JS! но безопасен ли он?
Али Шакиба
1
Недостатком этого решения является то, что html, body {overflow: hidden;} удалит прокрутки страниц.
Али Шакиба
Я пытаюсь добавить нижний колонтитул в приведенный выше код, но нижний колонтитул не отображается. не могли бы вы помочь.
Акшай Раут
18

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

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

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

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

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});
Тим Гертс
источник
7

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

<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 столбец.

Данут Милея
источник
Ваш код будет работать только в том случае, если TD, содержащий IFRAME, имеет высоту: 100%. Это будет работать, если таблица содержится в элементе DIV, потому что у вас есть стиль для всех div, чтобы иметь высоту: 100%.
Никола Петкански
6

Код 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;
asimrafi
источник
4

Это верно, вы показываете 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>

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

ARemesal
источник
8
30px + 90%! = 100%
степанчег
1
мог бы использовать calc (100% - 30px) вместо 90%
Джастин Е.
4

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

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

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

Sree
источник
4
Не заполняет родительский элемент, просто помещает большую высоту в iframe.
Бен
3

Вы можете сделать это с помощью 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>
vdbuilder
источник
2

Новое в 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>
Стефан Штайгер
источник
2

Я использовал 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/

daamsie
источник
1

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

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

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

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

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

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

annakata
источник
1

Попробовав маршрут 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

benb
источник
1

Это будет работать с приведенным ниже кодом

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
прил
источник
1

Аналогичный ответ @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

Рой Шмули
источник
0

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

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

scunliffe
источник
0

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

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
Амир Арад
источник
2
@vdbuilder: Нет, это только действует до html5. Могу поспорить, это все еще работает. ;-)
TJ Crowder
0

Хотя я согласен, что 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-документа. Это предотвращает это, потому что мы не указали высоту для них обоих. Когда мы даем% дочернему элементу, он ищет своего родителя, если нет, он принимает его высоту содержимого. И только если другим контейнерам не дали высоты, из того, что я пробовал.

pixelfe
источник
0

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

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

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

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

user2254487
источник
Бесшовные атрибут был удален из спецификации HTML 5.
Эрик Стейнборн
0

Простое решение 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();
    }

}
Unloco
источник
0

Вы не можете установить высоту 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>
Правин Абхале
источник
0

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

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

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

Стивен
источник
0

Я думаю, что лучший способ достичь этого сценария, используя позицию 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>
Развернуть фрагмент

для других дополнений и отступов в настоящее время css3 calc () очень продвинут и в основном совместим со всеми браузерами.

проверьте calc ()

Джей Патель
источник
0

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

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
доступ разрешен
источник
Вам нужно заменить -0с +'px'в конце. Это работает на мобильном телефоне?
Дмитрий Зайцев