Página completa <iframe>

97

Tengo el código de ejemplo a continuación. Esto funciona bien con todos los navegadores, excepto los navegadores de dispositivos móviles.

La etiqueta de desbordamiento es el problema.

Funciona con todos excepto para móviles:

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

Funciona con todos los dispositivos móviles y no con computadoras:

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

¿Cuál es la mejor manera de hacer que funcione en ambos?

<!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
fuente
¿Por qué no simplemente redirigir a cnn.com?
GolezTrol
cnn.com es más un ejemplo. para mostrar el comportamiento que estoy tratando de prevenir.
Lacer
simplemente agregue <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> al encabezado del html que lo contiene y la capacidad de respuesta está de regreso (al menos parcialmente).
Nukey

Respuestas:

171

Aquí está el código de trabajo. Funciona en navegadores de escritorio y móviles. Espero eso ayude. gracias por todos los que respondieron.

<!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
fuente
2
cuidado, cuando quise poner un iframe arriba, hubo un problema en Chrome.
Agregué
Parece que está quitando la capacidad de respuesta (es decir, colapso de columnas, etc.) del contenido dentro del iframe. Pero de alguna manera solo al abrir la página con un safari móvil, no al cambiar el tamaño de un navegador de escritorio. ¿Alguna idea de qué podría causar ese comportamiento?
psteinweber
3
@psteinweber, solo necesita agregar <meta content='width=device-width, initial-scale=1.0' name='viewport'>a la página que lo contiene.
2015
Tuve que usar en vwlugar de las propiedades %for widthy height para obtener la alineación adecuada en Chromium 81. De lo contrario, funciona como un encanto.
Josh Habdas
18

Esto es para todos los navegadores y responde completamente:

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

Pon esto en tu CSS.

iframe {
  width: 100%;
  height: 100vh;
}
shoriwa-shaun-benjamin
fuente
3

Esto es lo que he usado en el pasado. 

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

También en el iframeagregar el siguiente estilo

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
Jay Patel
fuente
gracias por la respuesta, pero es esencialmente lo que tengo, así que no funciona. En el navegador móvil, corta cualquier cosa que se desborde y no le permite desplazarse.
Lacer
@Lacer Intenta reemplazar overflow: hiddenconoverflow: auto
Jay Patel
lo intenté. en el navegador móvil todavía lo corta y en los navegadores de escritorio causa doble desplazamiento
Lacer
no, todavía el doble desplazamiento en el navegador de escritorio y se corta en los navegadores móviles
Lacer
2

Para redireccionamientos de fotogramas de pantalla completa y cosas similares, tengo dos métodos. Ambos funcionan bien en dispositivos móviles y de escritorio.

Tenga en cuenta que estos son archivos HTML válidos y que funcionan en todos los navegadores. Solo cambia titley srcpara tus necesidades.
Puede considerar eliminar <meta charset>si no tiene caracteres que no sean ASCII.

1. este es mi favorito:

<!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% } -->

o 2. algo así , un poco más corto:

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


Nota :
Para ser conservador, evite usar los ejemplos anteriores height:100vhporque los navegadores antiguos no lo saben (tal vez sea discutible en estos días) y height:100vhno siempre es igual que height:100%en los navegadores móviles (probablemente no se aplique aquí). De lo contrario, vhsimplifica un poco las cosas, por lo que

3. este es un ejemplo que usa vh (no es mi favorito, menos compatible con pocas ventajas)

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