¿Cómo configurar iframe de pantalla completa?

El iframe en HTML significa marco en línea. La etiqueta «iframe» define una región rectangular dentro del documento en la que el navegador puede mostrar un documento separado, incluidas las barras de desplazamiento y los bordes. Un marco en línea se utiliza para incrustar otro documento dentro del documento HTML actual. Para el iframe de pantalla completa, debe cubrir toda la ventana gráfica.

Pasos a seguir para el iframe de pantalla completa:

Restablezca los márgenes flotantes de la página a 0px para el cuerpo html, div, etiquetas iframe:

html 
{
 overflow: auto;
}
 
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}

Transformar el comportamiento de la etiqueta iframe en CSS

iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
}

Establezca propiedades de iframe para resolver problemas entre navegadores:

<iframe src="myurl.in"
    frameborder="0" 
    marginheight="0" 
    marginwidth="0" 
    width="100%" 
    height="100%" 
    scrolling="auto"></iframe >

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>full screen iframe</title>
    <style type="text/css">
        html {
            overflow: auto;
        }
          
        html,
        body,
        div,
        iframe {
            margin: 0px;
            padding: 0px;
            height: 100%;
            border: none;
        }
          
        iframe {
            display: block;
            width: 100%;
            border: none;
            overflow-y: auto;
            overflow-x: hidden;
        }
    </style>
</head>
  
<body>
    <iframe src="https://en.wikipedia.org/wiki/HTML_element#Frames"
            frameborder="0" 
            marginheight="0" 
            marginwidth="0" 
            width="100%" 
            height="100%" 
            scrolling="auto">
  </iframe>
  
</body>
  
</html>

Producción:

Ejemplo 2: Usar <frameset rows=”100%,*”>.

<!DOCTYPE html>
<html>
  
<head>
    <title>full screen iframe</title>
</head>
<frameset rows="100%,*">
    <frame src=
"https://en.wikipedia.org/wiki/HTML_element#Frames">
        <noframes>
  
            <body>
  
            </body>
        </noframes>
</frameset>
  
</html>

Producción:

HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

Publicación traducida automáticamente

Artículo escrito por ia05030112 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta