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

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

. Если вы передаете данные в элемент DOM с сервера, вы должны установить данные для этого элемента: iframe:


  • закрытии JavaScript внутри циклов — простой практический пример — переполнение стека поддерживаемые браузеры … но это должно было выглядеть вот так: длины в процентах от области просмотра , такие как height: 100vh Глядя на вывод

    Как указывают @squint и @mekdev, вы получаете лучшая производительность, сначала создав функцию вне цикла, а затем связав результаты внутри цикла. 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>

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

<!doctype html>

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

html, body { height: 100%; }

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

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

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

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

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>

column , если есть: Сначала вы добавляете css

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

Это будет HTML:

html,body{
height:100%;
}

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

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

рабочий образец:

<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/ Следующая протестированная рабочая

согласно

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

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% был использован. Вы можете также используйте пиксели css для высоты. window.innerHeight Рабочий код:

Ссылка Рабочий сайт: Ссылка Встроенное видео заполняет всю


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

CSS и HTML код.

Пример:

http://embedresponsively.com/

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>

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

Только это сработало для меня (но для «same-domain»):

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

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

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)
    })();
}

javascript — преобразование между строками и ArrayBuffers — переполнение стека

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

или

<iframe .... onload="MakeIframeFullHeight(this);" ....