iFrame 100% de altura provoca la barra de desplazamiento vertical

Veo muchas preguntas sobre iFrames con una altura del 100% pero nadie parece tener exactamente el mismo problema que yo.iFrame 100% de altura provoca la barra de desplazamiento vertical

Lo que quiero hacer es tener un iFrame que cubra toda la ventana gráfica, sin barras de desplazamiento, sin configurar el desbordamiento: oculto en el cuerpo.

Obtengo un margen inferior de 5 px para mi iFrame que no se va con css, y causa una barra de desplazamiento vertical. El consejo estándar parece ser el desbordamiento: oculto en el cuerpo, pero eso no soluciona realmente el problema, y no es suficiente para mí.

Aquí hay un super simple jsFiddle example. (observe las barras de desplazamiento verticales dobles)

Este comportamiento es el mismo en Chrome 15, IE9 y FF9 para mí.

Fuente

2012-02-03 Per Salbark

No es el iframe que produce la barra de desplazamiento, que es el espacio en blanco después de que

<iframe src="http://www.bbc.co.uk" frameborder="0"></iframe> 
    <!-- Whitespace here; This is being rendered! --> 
</body>

Si no quieres verlo, utilice

* { line-height: 0; }

editar: Resulta que el problema persiste si elimina los espacios en blanco, pero la solución es la misma. Los marcos flotantes se representan como elementos en línea de forma predeterminada (iframe = 'en línea marco') y, por lo tanto, tienen una altura de línea que causa el problema.

Como alternativa, puede probar iframe { display: block; } o una combinación de ambas soluciones.

Fuente

2012-02-03 16:04:31 user123444555621

En Chrome, cuando hice clic con el botón derecho en el espacio en blanco y elegí ** Inspeccionar elemento **, el elemento 'HTML' dentro de' IFRAME' se seleccionó en la pestaña ** Elementos **. He agregado una captura de pantalla a mi respuesta. –

@davegrove No estoy seguro si el inspector es 100% exacto allí. – user123444555621

Intentó en los otros dos navegadores (Firefox e IE) e inspecciona destaca el mismo elemento. Pruébalo, ¿qué te destaca? –

Actualización:

ejemplo de trabajo en chrome 16.0.*, firefox 10.* (aparentemente IE9 actúa hacia arriba y muestra una barra de desplazamiento en ambos sentidos - ya sea un discapacitado si la altura se establece en un 99% o un ser activo que no pueden desplazarse si la altura es de 100%):

lugar lo siguiente en un archivo hTML y abrirlo (no sé lo que está haciendo jsFiddle diferente, pero no funciona de la misma manera)

<style> 
* { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    /*overflow: auto;*/ /* not needed, this is the default value*/ 
} 
</style> 
<iframe src="http://www.bbc.co.uk" frameborder="0"/>

Fuente

2012-02-03 13:21:14 Bogdan

Gracias, pero eso no es realmente lo que quiero. Quizás no estaba claro en mi pregunta. Quiero que iFrame ocupe toda la altura (y ancho) de la ventana gráfica, pero eso es fácil. Tu solución no hace eso. Continuaré y editaré mi pregunta para que los demás no se tomen también la idea equivocada. –

No funciona en Firefox 9.0.1 aquí. –

k, voy a investigar – Bogdan

viendo una barra de desplazamiento vertical fuera de jsFiddle con esto:

<html> 
<head> 
<style> 
body { 
    padding: 0; 
    margin: 0; 
} 

iframe { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
} 
</style> 
</head> 
<body> 
    <iframe src="http://www.bbc.co.uk" frameborder="0"/> 
</body> 
</html>

EDIT: He aquí un fragmento de debajo de las pestañas Elementos de lo que se selecciona cuando examino el espacio en blanco en Chrome.

Developer Tools Snip

Fuente

2012-02-03 13:25:46

Sí, lo siento por no ser lo suficientemente claro. Se mi otro comentario y mis cambios a la pregunta. –

Ermm :-), no estoy seguro de por qué esto no se ajusta a la ley. He ajustado mi respuesta para establecer el ancho e incluir una fuente para el 'iframe'. El 'iframe' en sí rellena todo el puerto de visualización y no hay un conjunto de estilos' overflow' en el documento que lo contiene. –

Creo que la brecha '5px' que está viendo pertenece al documento contenido en el' iframe'. Puedo confirmar esto, si haces clic con el botón derecho en el espacio en Chrome y eliges ** Inspeccionar elemento ** que puedes ver por ti mismo. –

Para resumir:

espacio en blanco antes de causas 4PX espacio en blanco al rigth del marco flotante.
espacio en blanco después de csuses espacio en blanco de 4 px después del iframe.

Esto se debe al carácter en línea de iframe como se señala en la primera publicación.

Fuente

2012-06-12 08:53:59 Poisson

Para evitar que la barra de desplazamiento intente esto:

CSS:

html, body { height:100%; margin:0;} 
.bdr { border: thick solid grey } 
.h100 { height:100%;} 
.w100 { Width: 100% } 
.bbox { box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
     } 
.vat { font-size: 0; vertical-align:top}

HTML:

<body class="bbox"><!-- no WS here--><iframe  
      class="bdr h100 w100 vat bbox" name="iframe1" 
      src="http://www.bbc.co.uk"> </iframe><!--no WS here either--></body>

El estilo .bbox impide divs sub crezcan. .Vat es necesario para IE y Firefox. Una alternativa para .vat es: display: block. O pantalla : bloque en línea + alineación vertical: arriba .brd es para demostración.

Fuente

2012-06-13 16:36:26 poisson

iFrame 100% de altura provoca la barra de desplazamiento vertical

Respuesta

Cuestiones relacionadas