"Pantalla completa" <iframe>

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 solucionar esto?

Aquí hay una imagen del problema:

Captura de pantalla del sitio

Oct 21 '10 04:10 Trufa

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

<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 establecer los márgenes de la página enmarcada en 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 del padre en lugar de toda la ventana gráfica, cambie position:fixeda position:absolutey asegúrese de que el padre tenga una posición distinta a static.

Feb 06 '2013 20:02 Lawrence Dol

Tiene bodyun margen predeterminado en la mayoría de los navegadores. Intentar:

body {
    margin: 0;
}

en la página con el iframe.

Oct 20 '2010 21:10 kevingessner

También puede utilizar 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 porcentuales de la 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í .

Jan 08 '2015 04:01 Josh Crozier

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

Jul 22 '2012 09:07 Hritik