Повноекранний кадр з висотою 100%

238

Чи підтримується висота iframe = 100% у всіх браузерах?

Я використовую doctype як:

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

Якщо я кажу:

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

Я маю на увазі, чи дійсно це займе висоту залишкової сторінки (оскільки є ще один кадр зверху із фіксованою висотою 50 пікселів) Чи підтримується це у всіх основних браузерах (IE / Firefox / Safari)?

Що стосується також смуг прокрутки, хоча я, мовляв scrolling="no", бачу відключені смуги прокрутки у Firefox ... Як я повністю приховую смуги прокрутки і автоматично встановіть висоту рамки?

javascript  html  css  iframe  html-frames 
— testndtv
джерело
14
Дивіться насправді у мене не всі браузери встановлені .. Так само різні версії .. так само хотілося переконатися, що це на
— зразок
1
Ви також можете спробувати його у валідаторі css.
— Рубен
6
Так, це не дає жодної помилки / попередження ... Але моє запитання: чи всі браузери насправді застосовують 100% висоту?
— testndtv
Для мене ця відповідь спрацювала чудово: stackoverflow.com/questions/5272519/…
— Zied Hamdi

Відповіді:

276

Ви можете використовувати набір фреймів у попередній відповіді, але якщо ви наполегливо використовуєте iFrames, два наступні приклади повинні працювати:

<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 на повну ширину!

— Сокира
джерело
3
Хоча одне запитання, хоча ... Для чого нам потрібно використовувати style = "висота: 100%; ширина: 100%;" коли ми все одно говоримо iframe height = "100%" width = "100%"
— testndtv
1
Крім того, тільки IE не приймає 100% висоти (займає близько 200 пікселів ht) ... FF і Safri беруть всю решту висоти ..
— testndtv
@Boris Zbarsky Так, спасибі за те, що ти мені повідомив! Я оновив пост зараз !! @hmthr Ваше перше запитання, що стосується подвійних тегів, полягає в тому, що попередні веб-переглядачі беруть теги "висота" та "ширина", але не працюють добре з тегами стилів! Щодо помилки IE, я б вважав за краще дотримуватися першого коду для цього випадку.
— Сокира
15
Для правильного використання iframe 100% батьків потрібно мати 100%. У новіших доктрипах тег html та body не є автоматично 100%. Коли я додав висоту: 100% для html та body, то він працював бездоганно. Отже, правильною відповіддю на запитання, я думаю, є відповідь від rudie, за винятком того, що мені довелося зберігати свою доктрину 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 ... Я використовував ширину: 100% і висоту: 100vh, тому що джерело, яке я тягнув, було досить широким, а рамка міститься у діві. Відмінне рішення. Дякую.
— NotJay
2
додавши display: blockзробив трюк, щоб запобігти появі подвійної смуги прокрутки
— KavenG
45

1. Змініть свій ДОКТИП на щось менш суворе. Не використовуйте XHTML; це нерозумно. Просто використовуйте HTML 5, і ви добре:

<!doctype html>

2. Можливо, вам потрібно буде переконатися (залежить від браузера), чи має батьківський бік iframe висоту. І його батько. І його батько. І т.д.:

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

Я зіткнувся з тією ж проблемою, я втягнув кадр у діву. Спробуйте це:

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

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

— 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.
— wolfyuk
Трохи взявся зробити цю роботу всередині Wordpress, я просто додав у свій плагін короткий код. РОБОТА ПОДОБАЄТЬСЯ ХАРМА.
— Енді
Це працює. але проблема полягає в тому, що висота не буде перерахована на кожному внутрішньому кадрі iframe. Чи є якесь вирішення?
— Беруз.М
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>
Розгорніть фрагмент

— khoa
джерело
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

На додаток до відповіді Akshit Soota: важливо чітко встановити висоту кожного батьківського елемента, а також таблиці та стовпця, якщо такі є:

<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>
Розгорніть фрагмент

— DAH
джерело
Зверніть увагу, вам може знадобитися якийсь 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);" ....
— Т.Тодуа
джерело
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 під час завантаження 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=...>
— Теджпал Шарма
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.