"Pantalla completa" <iframe>

163

Cuando uso el siguiente código para crear un iframe:

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

El iframe no llega hasta el final: un "borde" blanco de 10 píxeles rodea el iframe. ¿Cómo podría resolver esto?

Aquí hay una imagen del problema:

Captura de pantalla del sitio

html iframe Trufa
fuente

Respuestas:

103

El bodytiene un margen por defecto en la mayoría de los navegadores. Tratar:

body {
    margin: 0;
}

en la página con el iframe.

kevingessner
fuente
301

Para cubrir toda la ventana gráfica, puede usar:

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

Y asegúrese de ajustar los márgenes de la página con marcos a 0, por ejemplo, body { margin: 0; }. - En realidad, esto no es necesario con esta solución.

Estoy usando esto con éxito, con un display:noneJS adicional para mostrarlo cuando el usuario hace clic en el control apropiado.

Nota: Para llenar el área de vista de los padres en lugar de toda la ventana gráfica, cambie position:fixeda position:absolute.

Lawrence Dol
fuente
31
Esta respuesta resuelve cómo hacer que el iframe ocupe toda la pantalla
Mark Ma
También puede usar longitudes de porcentaje de ventana gráfica ..
Josh Crozier
2
La respuesta aceptada no funcionó para mí. Esto lo hizo. Gracias.
AlexVPerl
2
¡Gran respuesta! Simple, cross-browser y definitivo.
blankip
Funciona perfectamente con HTML 5
break7533
39

También puede usar longitudes de porcentaje de ventana gráfica para lograr esto:

5.1.2. Longitudes de porcentaje de ventana gráfica: las unidades 'vw', 'vh', 'vmin', 'vmax'

Las longitudes de porcentaje de ventana gráfica son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se escalan en consecuencia.

Donde 100vhrepresenta la altura de la ventana gráfica, y también 100vwrepresenta el ancho.

Ejemplo aquí

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>
Expandir fragmento

Esto es compatible con la mayoría de los navegadores modernos. Puede encontrar soporte aquí .

Josh Crozier
fuente
8

Uso frameborder="0". Aquí hay un ejemplo completo:

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

Intente agregar el siguiente atributo:

scrolling="no"
cmaxtech
fuente
5

Imposible decirlo sin ver un ejemplo en vivo, pero trata de dar ambos cuerpos margin: 0px

Pekka
fuente
@Trufa podría ser el margen, pero también podría ser otra cosa. Mejor uso de la vista "Disposición" de Firebug para descubrirlo
Pekka
2

Podrías intentarlo frameborder=0.

Novato
fuente
Gracias pero eso es "dentro del iframe". Necesitaba modificar el exterior (no lo sabía hasta que @kevingessner respondiera) ¡¡gracias !!
Trufa
2

Agregar esto a su iframe podría resolver el problema:

frameborder="0"  seamless="seamless"
pentexnyx
fuente
1
@FABBRj Genial, podría ayudar: D
pentexnyx
0

He creado una plantilla esencial que une algunas de las respuestas anteriores.

Ohad Cohen
fuente
-2

Use este código en lugar de él:

    <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
fuente
77
Ya no se admite en HTML5
Hari Karam Singh el