iframe 100% de altura que causa la barra de desplazamiento vertical

Estoy tratando de diseñar un diseño que tenga un encabezado de altura fija en la parte superior de la pantalla, y luego un iframe debajo ocupando el espacio restante. La solución que se me ocurrió es el siguiente:iframe 100% de altura que causa la barra de desplazamiento vertical

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style> 
    </head> 
    <body> 
    <div style="height:70px;background-color:blue;"></div> 
    <div style="position:absolute;top:70px;bottom:0;left:0;right:0;"> 
     <iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe> 
    </div> 
    </body> 
</html>

Esencialmente, estoy creando un div con posición absoluta por debajo de la cabecera y el dimensionamiento que para asumir el resto del espacio, a continuación, poner el iframe tamaño completo en el que hay .

El problema al que me estoy enfrentando es que si pega el código exactamente como se ve a continuación, usando XHTML Strict, en cada navegador (probado w/chrome/safari/ie8) verá una barra de desplazamiento vertical con algunos píxeles de espacio en blanco debajo del div.

Haciendo algo de experimentación, encontré que si eliminé completamente el doctype funciona en safari/cromo, pero IE empeora aún más, estableciendo la altura del iframe en 300px más o menos. Si configuro el doctype como transitorio, funciona en safari/chrome pero tiene el mismo problema que en el caso estricto para IE8. Si uso el doctype HTML5, tiene el mismo problema que el estricto en todos los navegadores.

Finalmente, si elimino el iframe en cualquiera de estos casos, todo se presenta bien.

¿Alguien tiene alguna idea?

Fuente

2010-05-25 Keevon

Adición de CSS body {overflow-y: hidden;}

elimina el desplazamiento vertical. Si el contenido de iFrame excede el tamaño de la página, el iframe obtendrá una barra de desplazamiento en lugar de la página.

Fuente

2010-05-25 06:47:24 Daveo

Gracias, eso funcionó! Solo por curiosidad, ¿alguna idea de por qué el contenido adicional se estaba mostrando? Conceptualmente, parece que todo debería encajar dentro de la página. – Keevon

Uno de los maravillosos errores de relleno/margen de IE - Estoy seguro ... –

Impresionante. Gracias. Me diste la pieza que faltaba del rompecabezas en mi búsqueda larga e irritante para tratar de que funcionara. Desafortunadamente, en IE 6 y 7 (no sé sobre IE 8) todavía tenía que usar un estilo solo de IE: 'height: expression ((document.body.offsetHeight - 25) + 'px');'. Pero estoy bien con esto Firefox y otros navegadores ignoran este estilo. Afortunadamente, mi barra de encabezado es de tamaño fijo. Si no, tendría que usar 'document.body.offsetHeight - document.getElementById ('headerbar'). OffsetHeight' o algo así. – ErikE

iframe 100% de altura que causa la barra de desplazamiento vertical

Respuesta

Cuestiones relacionadas