html - tamaño - quitar el scroll de un div
iFrame 100% de altura hace que la barra de desplazamiento vertical (5)
Veo muchas preguntas sobre iFrames de altura al 100%, pero nadie parece tener el mismo problema que yo.
Lo que quiero hacer es tener un iFrame que cubra toda la ventana gráfica, sin barras de desplazamiento, sin configuración de desbordamiento: oculto en el cuerpo.
Tengo un margen inferior de 5px en mi iFrame que no desaparece con css, y provoca una barra vertical vertical. El consejo estándar parece ser establecer un desbordamiento: oculto en el cuerpo, pero eso no es realmente resolver el problema, y no es suficiente para mí.
Aquí hay un ejemplo de jsFiddle super simple. (note las barras de desplazamiento verticales dobles)
Este comportamiento es el mismo en Chrome 15, IE9 y FF9 para mí.
Actualizar:
ejemplo de funcionamiento en chrome 16.0.* , firefox 10.* (aparentemente ie9 actúa y muestra una barra de desplazamiento en cualquier dirección, ya sea una desactivada si la altura está establecida en 99% o una activa que no puede desplazarse si la altura es 100 %):
coloque lo siguiente en un archivo html y ábralo (no sé qué hace jsfiddle de manera 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"/>
No es el iframe el que produce la barra de desplazamiento, es el espacio en blanco que sigue.
<iframe src="http://www.bbc.co.uk" frameborder="0"></iframe>
<!-- Whitespace here; This is being rendered! -->
</body>
Si no quieres verlo, usa
* { line-height: 0; }
Editar: Resulta que el problema persiste si elimina el espacio en blanco, pero la solución es la misma. Los iframes se representan como elementos en línea de forma predeterminada (iframe = ''marco en línea ''), y por lo tanto tienen una altura de línea que causa el problema.
Como alternativa, puede probar iframe { display: block; } iframe { display: block; } o una combinación de ambas soluciones.
No veo 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>
EDITAR: Aquí hay un fragmento de debajo de las pestañas de Elementos de lo que se selecciona cuando inspecciono el espacio en blanco en Chrome.
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 evita que los sub divs crezcan. .Vat es necesario para IE y Firefox. Una alternativa para .vat es: display: block. O muestre: inline-block + vertical-align: top .brd es para fines de demostración.
Para resumirlo:
- el espacio en blanco antes causa un espacio en blanco de 4px a la derecha del iframe.
- espacio en blanco después de los csuses espacio en blanco 4px después del iframe.
Esto se debe al carácter en línea de iframe como se señaló en la primera publicación.