Foros del Web » Creando para Internet » CSS »

Capa al 100% bajo header

Estas en el tema de Capa al 100% bajo header en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/07/2008, 05:21
Avatar de Phoncadiz  
Fecha de Ingreso: mayo-2004
Ubicación: Cádiz City
Mensajes: 232
Antigüedad: 13 años, 6 meses
Puntos: 1
Capa al 100% bajo header

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:
__________________
Tantas horas delante de una pantalla servirá para algo....
[Phoncadiz; mínimo 8 h. al día con el PC] :stress:
  #2 (permalink)  
Antiguo 09/07/2008, 05:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Capa al 100% bajo header

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.
  #3 (permalink)  
Antiguo 09/07/2008, 06:08
Avatar de Phoncadiz  
Fecha de Ingreso: mayo-2004
Ubicación: Cádiz City
Mensajes: 232
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Capa al 100% bajo header

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.
__________________
Tantas horas delante de una pantalla servirá para algo....
[Phoncadiz; mínimo 8 h. al día con el PC] :stress:
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:15.