Полноэкранный фрейм с высотой 100%

238

Поддерживается ли iframe height = 100% во всех браузерах?

Я использую doctype как:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

В моем коде iframe, если я скажу:

<iframe src="xyz.pdf" width="100%" height="100%" />

Я имею в виду, будет ли она на самом деле принимать высоту оставшейся страницы (так как сверху есть еще один кадр с фиксированной высотой 50 пикселей). Поддерживается ли это во всех основных браузерах (IE / Firefox / Safari)?

Что касается полос прокрутки, хотя я и говорю scrolling="no", я вижу отключенные полосы прокрутки в Firefox ... Как мне полностью скрыть полосы прокрутки и автоматически установить высоту iframe?

javascript html css iframe html-frames testndtv
источник
14
Видите ли, на самом деле у меня не установлены все браузеры .. Также разные версии .. Также просто хотел убедиться, что это своего рода стандарт ..
testndtv
1
Вы также можете попробовать это в валидаторе CSS.
Рубен
6
Да, это не дает никакой ошибки / предупреждения ... Но мой вопрос заключается в том, все ли браузеры на самом деле применяют 100% высоты?
testndtv
Для меня этот ответ работал нормально: stackoverflow.com/questions/5272519/…
Зиед Хамди,

Ответы:

276

Вы можете использовать frameset в качестве предыдущих состояний ответа, но если вы настаиваете на использовании iFrames, должны работать 2 следующих примера:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Альтернатива:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Чтобы скрыть прокрутку с двумя вариантами, как показано выше:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Взломать со вторым примером:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Чтобы скрыть полосы прокрутки iFrame, родительский overflow: hiddenэлемент скрывает полосы прокрутки, а iFrame - до 150% ширины и высоты, что заставляет полосы прокрутки выходить за пределы страницы, а тело не имеет полос прокрутки. Нельзя ожидать, что iframe превысит границы страницы. Это скрывает полосы прокрутки iFrame с полной шириной!

секира
источник
3
Звучит хорошо ... Хотя один вопрос ... Почему мы должны использовать style = "height: 100%; width: 100%;" когда мы в любом случае говорим, что iframe height = "100%" width = "100%"
testndtv
1
Кроме того, только IE не принимает 100% высоты (занимает около 200 пикселей) ... FF и Сафри берут всю оставшуюся высоту ..
testndtv
@ Борис Збарски Да, спасибо, что сообщили мне об этом! Я обновил пост сейчас !! @hmthr Ваш первый вопрос, касающийся двойных тегов, заключается в том, что более ранние браузеры принимают теги "height" и "width", но плохо работают с тегами style! Что касается ошибки IE, я бы предпочел, чтобы вы придерживались первого кода для этого случая.
Топор
15
Чтобы заставить iframe правильно использовать 100%, родитель должен быть на 100%. В более новых доктайпах тег html и body не автоматически равен 100%. Когда я добавил высоту: 100% для html и body, это сработало безупречно. Таким образом, правильный ответ на вопрос, я думаю, - ответ от Руди, за исключением того, что я должен был сохранить свой тип документа xhtml. Кроме того, обратите внимание, что правила переполнения тогда не нужны. Полосы прокрутки затем работают по назначению - автоматически.
Спиралис
3
Этот ТАК ответ тоже очень короткий и приятный.
Уве Кейм
164

3 подхода для создания полноэкранного режима iframe:

  • Подход 2 - Фиксированное позиционирование

    Этот подход довольно прост. Просто установите расположение fixedэлемента и добавьте height/ widthиз 100%.

    Пример здесь

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Развернуть фрагмент

  • Подход 3

    Для этого последнего метода просто установите для heightэлементов body/ html/ iframeзначение 100%.

    Пример здесь

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Развернуть фрагмент

Джош Крозье
источник
4
В итоге я использовал вариант 1 ... Я использовал width: 100% и height: 100vh, потому что источник, который я извлекал, был довольно широким, а iframe содержался в div. Отличное решение. Спасибо.
NotJay
2
добавление display: blockсделало трюк, чтобы предотвратить двойную полосу прокрутки
KavenG
45

1. Измените свой DOCTYPE на что-то менее строгое. Не используйте XHTML; это глупо. Просто используйте doctype HTML 5, и все хорошо:

<!doctype html>

2. Вам может потребоваться убедиться (зависит от браузера), что родительский элемент iframe имеет высоту. И его родитель. И его родитель. И т.д:

html, body { height: 100%; }
Rudie
источник
9
Для меня важной частью было то, что тег html и body требовал высоты: 100%. Спасибо.
Спиралис
1
Настройка только тела работает в Chrome, но не в других браузерах.
Дингл
Вот 2 альтернативных подхода .
Джош Крозье
36

Я столкнулся с той же проблемой, я тянул iframe в div. Попробуй это:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

Высота установлена ​​на 100vh, что означает высоту окна просмотра. Кроме того, ширина может быть установлена ​​в 100vw, хотя вы, скорее всего, столкнетесь с проблемами, если исходный файл будет отзывчивым (ваш кадр станет очень широким).

NotJay
источник
3
насколько я знаю, не поддерживается в любом браузере
VisualBean
1
Потратив больше времени, чем мне хотелось бы признать, возиться с этой проблемой, это ТОЧНО то, что мне было нужно. За исключением того, что вместо веб-сайта я использовал другой HTML-файл, который требовал незначительной корректировки высоты области просмотра, и теперь это хорошо. Спасибо!
Томас Джейкобс
29

Это сработало очень хорошо для меня (только если контент iframe пришел из того же домена ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
Иван
источник
21
Это будет работать только в том случае, если iframe srcдомен находится в том же домене, что и родительская страница, в противном случае вы получите сообщение об отказе в разрешении contentWindow.document.
Вольфюк
Потребовалось немного, чтобы сделать это внутри Wordpress, я просто добавил шорткод в свой плагин. Работает как шарм.
Энди
Оно работает. но проблема в том, что он не будет пересчитывать высоту на каждой внутренней обратной передаче iframe. Есть ли обходной путь?
Behrouz.M
7 

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>
Развернуть фрагмент

Хоа
источник
6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

Heitor Giacomini
источник
4

Следующие проверенные рабочие

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
Ума Шанкар Гоэль
источник
1
14 других ответов уже здесь. Можете ли вы объяснить, как ваш ответ лучше или, по крайней мере, отличается от 14 других?
Стивен Раух
2

Дополнительно к ответу Акшит Сута: важно явно установить высоту каждого родительского элемента, а также таблицы и столбца, если таковые имеются:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
Brabbeldas
источник
2

Вы сначала добавляете CSS

html,body{
height:100%;
}

Это будет HTML:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
Тарик Джавед
источник
1

Вот краткий код. Он использует метод jquery для определения текущей высоты окна. При загрузке iFrame устанавливает высоту iframe такой же, как текущее окно. Затем для обработки изменения размера страницы тег body имеет обработчик события onresize, который устанавливает высоту iframe при каждом изменении размера документа.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

вот рабочий пример: http://jsbin.com/soqeq/1/

BraveNewMath
источник
0

Еще один способ создания жидкости на весь экран iframe:

Встроенное видео заполняет весь viewport область при загрузке страницы

Хороший подход для целевых страниц с видео или любым встроенным контентом. У вас может быть любой дополнительный контент ниже встроенного видео, которое отображается при прокрутке страницы вниз.

Пример:

CSS и HTML код.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>
Развернуть фрагмент

ДАХ
источник
Обратите внимание, что вам может понадобиться JavaScript для Firefox. Существует общая проблема с высотой iframe в Firefox.
DAH
0

http://embedresponsively.com/

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

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
Том Уизерингтон
источник
0

Только это работало для меня (но для "одного домена"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

Вы можете использовать либо: 

MakeIframeFullHeight(document.getElementById("iframe_id"));

или 

<iframe .... onload="MakeIframeFullHeight(this);" ....
T.Todua
источник
0

Согласно https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , процентные значения больше не допускаются. Но у меня сработало следующее

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Хотя width:100%работает, height:100%не работает. Так window.innerHeightбыло использовано. Вы также можете использовать пиксели CSS для высоты.

Рабочий код: Ссылка Рабочий сайт: Ссылка

Агнель Вишал
источник
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
blueDexter
источник
0

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

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
Тейпал Шарма
источник