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

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

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

157 голосов
/ 09 января 2015

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>
42 голосов
/ 03 мая 2011

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

<!doctype html>

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

html, body { height: 100%; }
29 голосов
/ 30 июля 2015

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

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

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

25 голосов
/ 07 сентября 2012

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

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

5 голосов
/ 15 декабря 2016 

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 голосов
/ 25 апреля 2016

Вы сначала добавляете 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 голосов
/ 12 февраля 2013

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

<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>
1 голос
/ 10 августа 2018

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

<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>
Страница:
...