CSS - No funciona height: 100% :S

   
Vista:

No funciona height: 100% :S

Publicado por José (1 intervención) el 24/10/2011 12:48:49
Amigos tengo un problema con los height en las 3 columnas left_column,center_column y right_column, no se exapanden al 100% del height, acontinuacion dejo los cadigos:

CSS:

*{
margin: 0;
padding: 0;
}

html, body{
height: 100%;
background-color: yellow;
}

#wrapper{
width: 1200px;
background-color: black;
margin: 0 auto -120px;

min-height: 100%;
height: auto !important;
height: 100%;
}

#header{
background-color: red;
}
#header_content{
background-color: blue
}

#nav{
background-color: green;
}

#nav_content{
background-color: greenyellow;
}

#left_column{
height: 100%;
float: left;
width: 200px;
background-color: pink;


}

#left_column_content{
background-color: black;
}

#center_column{
height: 100%;
margin: 0 200px;
background-color: darkblue;
}

#center_column_content{
background-color: blue;
}

#right_column{
float: right;
width: 200px;
background-color: white;

height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

#right_column_content{
background-color: whitesmoke;
}

#footert{
height: 120px;
position:relative;
margin: 0 auto;
width: 1200px;
background-color: red;
}

#footert_content{
background-color: rosybrown;
}

---------------------------------------------------index.html------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
header <br/>
<div id="header_content">
header content<br/>
</div>
</div>
<div id="nav">
nav<br/>
<div id="nav_content">
nav<br/>
</div>
</div>
<div id="left_column">
left_column
<div id="left_column_content">
left_column_content<br/>
</div>
</div>

<div id="right_column">
right_column<br/>
<div id="right_column_content">
right_column_content<br/>
</div>
</div>

<div id="center_column">
center_column
<div id="center_column_content">
center_column_content<br/>
center_column_content<br/>
center_column_content<br/>
center_column_content<br/>
</div>
</div>

</div>
<div id="footert">
footer<br/>
<div id="footert_content">
footer_content<br/>
</div>
</div>
</body>
</html>


Me he pasado horas quebrandome la cabeza, ojala puedan ver algo q yo no, saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

No funciona height: 100% :S

Publicado por DerangedMX (39 intervenciones) el 26/10/2011 17:42:51
El problema con height:100%; es que en realidad toma como valor el contenido del div o la etiqueta en cuestión. Regularmente, la solución que aplico al tema es empleando min-height:xxx; el cual asigna un valor al contenedor en cuestión para que ocupe la altura deseada en el navegador. Tal parece que es un tema que da para muchas teorías, como puedes verlo en este url. Espero te sea de utilidad la información. Saludos!

certificado de seguridad | certificado digital | pki
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar