«Полный экран» <iframe> - PullRequest
Новая
       13

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

133 голосов
/ 21 октября 2010

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

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

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

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

Screenshot of site

Ответы [ 8 ]

245 голосов
/ 07 февраля 2013

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

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

95 голосов
/ 21 октября 2010

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

body {
    margin: 0;
}

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

34 голосов
/ 08 января 2015

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

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 голосов
/ 22 июля 2012

Используйте 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>
6 голосов
/ 16 мая 2012

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

scrolling="no"
5 голосов
/ 21 октября 2010

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

2 голосов
/ 21 октября 2010

Вы можете попробовать frameborder=0.

0 голосов
/ 04 декабря 2012

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

    <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...