Полноэкранный iframe с высотой 100%

поддерживается ли высота 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%" />

Я имею в виду, действительно ли это займет высоту оставшейся страницы (так как есть еще один кадр сверху с фиксированной высотой 50px) Поддерживается ли это во всех основных браузерах (IE/Firefox/Safari) ?

также относительно полос прокрутки, хотя я говорю scrolling="no", Я вижу отключенные полосы прокрутки в Firefox...Как я полностью скрыть полосы прокрутки и установить высоту iframe автоматически?

196
css html html-frames iframe javascript

9 ответов

вы можете использовать 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>

чтобы скрыть прокрутку с 2 альтернативами, как показано выше:

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

Hack со вторым примером:

<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 с полной шириной!

221

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

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

    этот подход довольно прямолинейный. Просто установите позиционирование fixed элемент и добавить height/width of 100%.

    пример Вот!--39-->

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

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

<!doctype html>

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

html, body { height: 100%; }
40

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

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

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

25

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

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

6

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

дополнительно к ответу 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>
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>
2