Полноэкранный фрейм с высотой 100% - PullRequest
Новая
       42

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

215 голосов
/ 03 мая 2011

Поддерживается ли высота iframe = 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?

Ответы [ 15 ]

1 голос
/ 13 июня 2018

Согласно 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 голос
/ 30 октября 2014

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

0 голосов
/ 02 декабря 2017

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

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 голосов
/ 06 декабря 2016

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 голосов
/ 18 октября 2015

Еще один способ создания полноэкранного режима 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>
Страница:
...