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

Question

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

Поддерживается ли 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 автоматически?

329

javascript html css iframe html-frames

Источник

user485743 03 май '11 в 10:09

20 ответов

Решение

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

Подход 1 - Длина просмотра в процентах
В поддерживаемых браузерах вы можете использовать длины в процентах области просмотра, такие как height: 100vh,
куда 100vh представляет высоту области просмотра, а также 100vw представляет ширину.
Пример здесь
```
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>
```

Подход 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>

219

Источник

user2680216 09 янв '15 в 04:28

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

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

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

55

Источник

user878703 30 июл '15 в 14:37

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

<!doctype html>

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

html, body { height: 100%; }

47

Источник

user247372 03 май '11 в 15:26

Это сработало очень хорошо для меня (только если контент 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>

37

Источник

user955869 07 сен '12 в 04:22

<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

13

Источник

user3383771 17 апр '20 в 21:47

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>

10

Источник

user7301481 15 дек '16 в 10:21

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

8

Источник

user6337308 27 фев '17 в 20:22

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

<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>

6

Источник

user9762358 10 авг '18 в 02:43

Чтобы получить полноэкранный iframe без полосы прокрутки внутри iframe, используйте следующий css. Больше ничего не требуется

      iframe{
            height: 100vh;
            width: 100vw
        }
    
    iframe::-webkit-scrollbar {
        display: none;
    }

6

Источник

user9421213 08 янв '21 в 10:32

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>

3

Источник

user6551239 06 дек '16 в 15:45

Вы сначала добавляете 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>

3

Источник

user3137295 25 апр '16 в 18:00

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

<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>

2

Источник

user1186108 12 фев '13 в 07:59

если твой родитель<div>заполните высоту множественным решением, упомянутым здесь.

Тогда вы также можете использовать что-то вроде

      <div style="display:flex;">
    <iframe style="flex:1 1 0%;" src="..."></iframe>
</div>

1

Источник

user4929727 02 авг '22 в 15:46

Согласно 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 для высоты.

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

1

Источник

user5599587 13 июн '18 в 10:35

Вот краткий код. Он использует метод 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/

1

Источник

user551811 30 окт '14 в 01:29

Попробуйте это с помощью jquery,

      $('iframe').on('`enter code here`load', function(){
   $(this).css('height', $(this).contents().find('body').height());
});

0

Источник

user1708139 04 ноя '22 в 12:08

Вы можете вызвать функцию, которая будет вычислять высоту тела 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=...>

0

Источник

user3743976 05 май '20 в 15:56

Еще один способ построить жидкость на весь экран `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>

0

Источник

user2360439 18 окт '15 в 09:42

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

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);" ....

0

Источник

user2377343 02 дек '17 в 16:31

Другие вопросы по тегам javascript html css iframe html-frames

user705471 03 май '11 в 10:41 2011-05-03 10:41 · Accepted Answer · 2011-05-03 10:41

Вы можете использовать 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 с полной шириной!

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

20 ответов

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

Подход 1 - Длина просмотра в процентах

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

Подход 3

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

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

Пример:

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

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

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