"Повний екран" <кадр>

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

— Труфа
джерело

103

У bodyбільшості браузерів є поле за замовчуванням. Спробуйте:

body {
    margin: 0;
}

на сторінці з iframe.

— кевінгсснер
джерело

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 зайняти весь екран

— Марк Ма

Ви також можете використовувати вікно перегляду-процентну довжину ..

— Josh Крозьє

2

прийнята відповідь не працювала для мене. це зробили. Дякую.

— AlexVPerl

2

Чудова відповідь! Простий, крос-браузер і остаточний.

— blankip

Чудово працює з 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>

— Хрітік
джерело

7

Спробуйте додати такий атрибут:

scrolling="no"

— cmaxtech
джерело

5

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

— Пекка
джерело

@Trufa це може бути маржа, але це може бути і щось інше. Найкраще скористайтеся переглядом "Макет" Firebug

— Pekka

2

Ви можете спробувати frameborder=0.

— Новачок
джерело

Дякую, але це "всередині iframe", мені потрібно було змінити зовні (я не знав, що до відповіді @kevingessner) дякую !!

— Труфа

2

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

frameborder="0"  seamless="seamless"

— п'ятикнижник
джерело

1

@FABBRj Чудово, я міг допомогти: D

— pentexnyx

0

Я створив шаблон суті, що об'єднує деякі відповіді, наведені вище.

— Охад Коен
джерело

-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

— Харі Карам Сінгх