"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

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