Полная страница <iframe>

99

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

Проблема заключается в теге переполнения.

Работает со всеми, кроме мобильных:

margin: 0; padding: 0; height: 100%; overflow: hidden;

Работает со всеми мобильными, а не компьютерами:

margin: 0; padding: 0; height: 100%;

Как лучше всего заставить его работать на обоих?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>
html css iframe Lacer
источник
Почему бы просто не перенаправить на cnn.com?
GolezTrol
cnn.com - это скорее пример. чтобы показать поведение, которое я пытаюсь предотвратить.
Lacer
просто добавьте <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> в заголовок содержащего html, и отзывчивость снова вернется (по крайней мере, частично).
Nukey

Ответы:

173

Вот рабочий код. Работает в настольных и мобильных браузерах. Надеюсь, поможет. спасибо за ответ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>
Lacer
источник
2
будьте осторожны, когда я хотел поставить iframe поверх - в Chrome возникла проблема. Я добавил закрытие </iframe> и работает
Михал - wereda-net
Похоже, это снижает отзывчивость (например, сворачивание столбцов и т. Д.) Содержимого внутри iframe. Но почему-то только при открытии страницы с помощью мобильного сафари, а не при изменении размеров настольного браузера. Есть идеи, что могло вызвать такое поведение?
psteinweber
3
@psteinweber, вам просто нужно добавить <meta content='width=device-width, initial-scale=1.0' name='viewport'>на содержащую страницу.
jfeust
Пришлось использовать vwвместо свойств %for widthи height для правильного выравнивания в Chromium 81. В остальном все работает как шарм.
Джош Хабдас
19

Это кросс-браузерный и полностью отзывчивый:

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>
Tawsif Torabi
источник
7

Поместите это в свой CSS.

iframe {
  width: 100%;
  height: 100vh;
}
Шорива-шаун-бенджамин
источник
4

Это то, что я использовал в прошлом. 

html, body {
  height: 100%;
  overflow: auto;
}

Также в iframeдобавляем следующий стиль

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
Джей Патель
источник
спасибо за ответ, но по сути это то, что у меня есть, поэтому не работает. В мобильном браузере он отключает все переполнение и не позволяет прокручивать.
Lacer
@Lacer Попробуйте заменить overflow: hiddenнаoverflow: auto
Jay Patel
действительно пробовал это. в мобильном браузере он по-прежнему отключает его, а в браузерах на настольных компьютерах вызывает двойную прокрутку
Ласер
нет, по-прежнему двойная прокрутка в браузере настольного компьютера и отключается в браузерах мобильных
Ласер
2

Для полноэкранного перенаправления кадров и подобных вещей у меня есть два метода. Оба отлично работают на мобильных и настольных компьютерах.

Обратите внимание, что это полноценные допустимые HTML-файлы, работающие в разных браузерах. Просто измените titleи srcпод свои нужды.
Вы можете отказаться от него, <meta charset>если у вас нет символов, отличных от ASCII.

1. это мой любимый:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

или 2. что-то в этом роде , чуть короче:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>


Примечание : Для того,
чтобы быть консервативным вышеприведенные примеры избегать использования , height:100vhпотому что старые браузеры не знают (может быть спорным в эти дни) и height:100vhне всегда совпадают с height:100%мобильными браузерами (вероятно , не применим здесь). В противном случае vhэто немного упрощает, поэтому

3. это пример использования vh (не мой любимый, менее совместим с небольшим преимуществом)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>
jj
источник