"pantalla completa" <iframe>

108

Cuando uso el siguiente código para crear un iframe:"pantalla completa" <iframe>

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

el iframe no va todo el camino, una "frontera" 10px blanco rodea el marco flotante. ¿Cómo podría resolver esto?

Aquí es una imagen del problema:

Screenshot of site

Fuente

2010-10-20 Trufa

El body tiene un margen predeterminado en la mayoría de los navegadores. Proveedores:

body { 
    margin: 0; 
}

en la página con el iframe.

Fuente

2010-10-20 21:32:16 kevingessner

¡Perfecto! ¡trabajado como un encanto! ¡¡muchas gracias!! – Trufa

Buscar google para 'restablecer css' –

no funcionó en Chrome – AlexVPerl

imposible decir sin ver un ejemplo vivo, pero tratar de darle a ambos cuerpos margin: 0px

Fuente

2010-10-20 21:23:11

Mire mi edición, gracias !! – Trufa

@Trufa podría ser el margen, pero también podría ser otra cosa. El mejor uso de la vista de "Disposición" de Firebug para averiguar –

Muchas gracias Pekka !!! de todos modos, @kevingessner lo clavó! – Trufa

usted podría intentar frameborder=0.

Fuente

2010-10-20 21:27:04 Newbie

Gracias pero eso es "dentro del iframe" que necesitaba para modificar el exterior (no lo sabía hasta que la respuesta de @kevingessner) ¡gracias! – Trufa

Trate de añadir el siguiente atributo:

scrolling="no"

Fuente

2012-05-16 13:21:33 cmaxtech

Uso frameborder="0". Aquí está 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>

Fuente

2012-07-22 09:56:10 Hritik

-2

Utilice este código en lugar de ello:

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

Fuente

2012-12-03 22:21:01

Ya no es compatible con HTML5 –

187

para cubrir toda el área de visualización, puede utilizar:

<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; 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 el los márgenes de la página enmarcada a 0, p. ej., body { margin: 0; }.~~ - En realidad, esto no es necesario con esta solución.

Estoy usando esto con éxito, con display:none y JS adicionales para mostrarlo cuando el usuario hace clic en el control apropiado.

Fuente

2013-02-06 20:59:27

+22

Esta respuesta resuelve cómo hacer que iframe ocupe toda la pantalla –

También puede usar [viewport-percentage lengths] (http: // stackoverflow. com/a/27832759/2680216) .. –

respuesta aceptada no funcionó para mí. esto si. Gracias. – AlexVPerl

También puede utilizar viewport-percentage lengths para lograrlo:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

Las longitudes de ventana gráfica en porcentajes son en relación con el tamaño de bloque de contención inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se ajustan en consecuencia.

Dónde 100vh representa la altura de la ventana gráfica, y del mismo modo 100vw representa la anchura.

Example Here

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>

Esto es compatible con la mayoría de los navegadores modernos - support can be found here.

Fuente

2015-01-08 04:07:11

¡Aquí mismo está el oro! –

Respuesta

Cuestiones relacionadas