«Полный экран» <iframe>

163

Когда я использую следующий код для создания iframe:

<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

Iframe не проходит весь путь - белая рамка "10" на границе окружает iframe. Как я мог решить это?

Вот изображение проблемы:

Скриншот сайта

html iframe Trufa
источник

103

В bodyбольшинстве браузеров поле имеет значение по умолчанию. Пытаться:

body {
    margin: 0;
}

на странице с iframe.

kevingessner
источник

301

Чтобы покрыть весь видовой экран, вы можете использовать:

<iframe src="mypage.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    Your browser doesn't support iframes
</iframe>

~~И не забудьте установить маржу Страницы с фреймами до 0, например, body { margin: 0; }.~~ - На самом деле, это не обязательно с этим решением.

Я использую это успешно, с дополнительным display:noneи JS, чтобы показать это, когда пользователь нажимает на соответствующий элемент управления.

Примечание. Чтобы заполнить область просмотра родителя вместо всего окна просмотра, измените position:fixedна position:absolute.

Лоуренс Дол
источник

31

Этот ответ решает, как заставить iframe занимать весь экран

Марк Ма

Вы также можете использовать длину в процентах от области просмотра .

Джош Крозье,

2

принятый ответ не работает для меня. это сделал. Спасибо.

AlexVPerl

2

Отличный ответ! Простой, кросс-браузерный и окончательный.

заготовка

Отлично работает с HTML 5

break7533

39

Вы также можете использовать длину в процентах области просмотра для достижения этой цели:

5.1.2. Длина в процентах от области просмотра: единицы измерения: vw, vh, vmin, vmax

Длина области просмотра в процентах относится к размеру исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно.

Где 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>

Развернуть фрагмент

Это поддерживается в большинстве современных браузеров - поддержку можно найти здесь .

Джош Крозье
источник

8

Использование frameborder="0". Вот полный пример:

    <iframe src="mypage.htm" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="myPageURL.htm"> click here to view the page directly. </a></iframe>

Hritik
источник

7

Попробуйте добавить следующий атрибут:

scrolling="no"

cmaxtech
источник

5

Невозможно сказать, не видя живой пример, но попробуйте дать оба тела margin: 0px

Пекка
источник

@Trufa это может быть край, но это может быть и что-то еще. Лучше всего использовать представление Firebug "Layout", чтобы узнать это

Pekka

2

Вы могли бы попробовать frameborder=0.

Новичок
источник

Спасибо, но это "внутри iframe", мне нужно было изменить внешний вид (я не знал этого, пока не ответил @kevingessner), спасибо !!

Труфа

2

Добавление этого в ваш iframe может решить проблему:

frameborder="0"  seamless="seamless"

pentexnyx
источник

1

@FABBRj Отлично, я могу помочь: D

pentexnyx

0

Я создал шаблон gist, объединяющий некоторые ответы выше.

Охад Коэн
источник

-2

Используйте этот код вместо этого:

    <frameset rows="100%,*">
        <frame src="-------------------------URL-------------------------------">
        <noframes>
            <body>
                Your browser does not support frames. To wiew this page please use supporting browsers.
            </body>
        </noframes>
    </frameset>

IşIk İşİtEn
источник

7

Больше не поддерживается в HTML5

Хари Карам Сингх

«Полный экран» <iframe>

Ответы: