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
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
0