Capa al 100% bajo header

Phoncadiz · #1 (**permalink**) 09/07/2008, 04:21

Ante todo decir que es una cuestión muy sencilla pero como no paro de buscar y de no encontrar... ahí os dejo la pregunta.

Simplemente quiero colocar una capa que ocupa el 100% de ancho y unos 80px de alto. A continuación otra capa que será el lateral de la web que debe tener un ancho de 200px y una altura del resto de la página.

He realizado la siguiente prueba:

Código HTML:

Body {margin:0px}
#Header { background-color:#009966; width:100%; height:80px; }
#panelIzq {width: 200px; background-color:#0099CC; float:left; top:80px; bottom:0px; position:absolute;}

El resultado es óptimo en Firefox pero en IE...

¿Qué solución hay? Si pongo HEIGHT: 100% me aparece la barra de navegación.
Sólo quiero que la capa panelIzq llegue hasta abajo.

Comparativa de FIREFOX e IE:

Mikmoro · #2 (**permalink**) 09/07/2008, 04:59

Tu problema es muy común, y se debe a que IE no sabe dimensionar una caja con arreglo a unas coordenadas (top:0; bottom: 0;), lo cual es un incordio.

Para mi gusto, una buena manera de solucionarlo es esta:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height:100%;
margin: 0;
padding: 0;
}
#header { background-color:#009966; width:100%; height:80px;position: absolute; top: 0; left: 0;z-index: 10;}
#panelIzq {width: 200px; background-color:#0099CC; float:left; height: 100%;position:relative;top: 0px;z-index: 0;}
#texto {position: relative; top: 85px;}
</style>
</head>
<body>
<div id="header"></div>
<div id="panelIzq">
<div id="texto">texo de prueba</div>
</div>
</body>
</html>

Mikel.

Phoncadiz · #3 (**permalink**) 09/07/2008, 05:08

Vaya vaya. Algo por el estilo se me había pasado por la cabeza, pero no sabía plasmarlo.

Es que IE es nuestra cruz.

Muchas gracias.