it-swarm.com.ru

Полноэкранный фрейм с высотой 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?

203
testndtv

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

237
Axe

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



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

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

    _/Пример здесь

    iframe {
        position: fixed;
        background: #000;
        border: none;
        top: 0; right: 0;
        bottom: 0; left: 0;
        width: 100%;
        height: 100%;
    }
    <iframe></iframe>


  • Подход 3

    Для этого последнего метода просто установите heightbodyhtml/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>

149
Josh Crozier

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

<!doctype html>

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

html, body { height: 100%; }
41
Rudie

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

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

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

27
NotJay

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

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

6
Heitor Giacomini

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>

5
khoa

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

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

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

Согласно 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
Agnel Vishal

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

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

<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
Uma Shankar Goel

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

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
T.Todua

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

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