CSS 100% altura + encabezado con altura estática;

Estoy construyendo un diseño que incluye un encabezado, que es de 40 px de alto. Debajo de este encabezado reside un SWF que debería ocupar el resto del espacio disponible. La mejor solución hasta ahora ha sido trabajar con una tabla, dando a la primera fila 40px de altura y la segunda fila a 100% de altura, pero estas filas aún se suman en Internet Explorer, lo que da como resultado una barra de desplazamiento que aparece en 40 píxeles adicionales. - que no debería ser el caso.CSS 100% altura + encabezado con altura estática;

He intentado usar esto: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ - funciona bien si tiene contenido que empuja hacia abajo con el tiempo pero con un SWF con 100% en él, ocupará toda la página, o la mitad de la página (dependiendo de poner el SWF en el contenido div o SWF siendo el contenido div).

Antes de recurrir a Javascript para ocuparme de este negocio, me pregunto si alguien más conoce una mejor solución.

Fuente

2009-04-27 Kasper

Intente configurar el encabezado como estático. Por lo tanto, flota sobre el cuerpo principal y establece el cuerpo principal al 100% de altura. Luego, dale al cuerpo un relleno de 40px en la parte superior.

Fuente

2009-04-27 19:14:12

que funciona sorta, tuvo que añadir width = "transparente" a mi swfobject a seguir mostrando la cabecera, pero ahora mi SWF sigue pegado hasta la parte superior de la página si tanto la posición del encabezado como la del swf están configuradas como absolutas. Cuando se establece en relativo ocurre lo mismo. – Kasper

Esto hubiera funcionado con una página normal, pero no con la configuración con el SWF, recurrí a javascript. Gracias de cualquier manera – Kasper

Una solución similar a forzar a pie de página en la parte inferior de una página podría funcionar

html, body{height:100%;margin:0;padding:0;} 
    #head{height:40px;background:blue;} 
    #wrapper{min-height: 100%;height: auto !important;height: 100%; margin: 0 auto -40px;background:red;} 
    #content{} 

<div id="wrapper"> 
<div id="head"> 
</div> 
<div id="content"> 
</div> 
</div>

Fuente

2009-04-27 19:45:27 wheresrhys

CSS 100% altura + encabezado con altura estática;

Respuesta

Cuestiones relacionadas