Height: 100% no funciona

kiM- · #1 (**permalink**) 30/04/2011, 18:53

Pués resulta que estoy haciendo una web, y he puesto el div contenedor al 100% y luego dentro varios divs, y quiero que uno de ellos en concreto se estire al 100% para que ocupe todo el alto del contenedor y que cuando el contenedor se estire el div también, pero no lo consigo, ¿Alguien sabe?

Os dejo el código:

CSS:

Cita:

html,body {
height: 100%;
}
#global {
width: 990px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#header {
width: 990px;
}
#menu_left {
background-image: url(images/bg_menu.png);
width: 237px;
background-repeat: repeat-y;
padding-bottom: 15px;
float: left;
height: 100%;
overflow: hidden;
}
.menu_sec {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFF;
}
.menu_sec ul {
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 11px;
list-style-type: none;
}
.menu_sec li a {
background-image: url(images/nothov.png);
background-repeat: no-repeat;
padding-left: 18px;
color: #FFF;
text-decoration: none;
}
.menu_sec img {
padding-left: 9px;
padding-bottom: 8px;
}
.menu_sec a:hover {
background-image: url(images/hov.png);
text-decoration: underline;
color: #115A9C;
}
#news_content {
width: 516px;
float: left;
}
#menu_right {
width: 237px;
float: right;
background-image: url(images/bg_menu.png);
background-repeat: repeat-y;
background-position: right;
}
.menu_sec_right {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFF;
text-align: right;
}
.menu_sec_right img {
padding-right: 9px;
padding-top: 2px;
}
#form1 {
width: 194px;
text-align: center;
margin-left: auto;
padding-top: 15px;
}
.textfield {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-bottom: 5px;
background-color: #eeeeee;
border: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 10px;
width: 145px;
}
.button1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #fff;
background-image: url(images/bg_button.png);
padding: 4px;
border: 0px;
}
#afiliados {
width: 100px;
margin-left: auto;
margin-right: 15px;
padding-bottom: 2px;
padding-top: 2px;
}
#publicidad {
padding-right: 23px;
}

HTML:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EA</title>
</head>

<body>
<div id="global">Colocar aquí el contenido para id "global"
<div id="header">Colocar aquí el contenido para id "header"</div>
<div id="menu_left">
<div class="menu_sec"><img src="images/button_left_1.png" width="228" height="79" />
<ul>
<li><a href="#">Noticias</a></li>
<li><a href="#">Equipo Web</a></li>
<li><a href="#">Acceso al Foro</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Afiliados</a></li>
<li><a href="#">Archivo de Noticias</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="menu_sec"><img src="images/button_left_2.png" width="228" height="79" />
<ul>
<li><a href="#">RojoFuego & VerdeHoja</a></li>
<li><a href="#">HeartGold & SoulSilver</a></li>
<li><a href="#">Pokémon D/P/P</a></li>
<li><a href="#">Pokémon B/W</a></li>
<li><a href="#">Pokémon R/Z/E</a></li>
<li><a href="#">Ediciones Antiguas</a></li>
<li><a href="#">Pokémon Spin-Off</a></li>
</ul>
</div>
<div class="menu_sec"><img src="images/button_left_3.png" width="228" height="78" />
<ul>
<li><a href="#">Biografías</a></li>
<li><a href="#">Guía de Temporadas</a></li>
<li><a href="#">Películas</a></li>
<li><a href="#">Los Cortometrajes</a></li>
<li><a href="#">Crónicas Pokémon</a></li>
<li><a href="#">Guía de Episodios</a></li>
<li><a href="#">Información Adicional</a></li>
</ul>
</div>
<div class="menu_sec"><img src="images/button_left_4.png" width="228" height="79" /><a href="#"><img src="images/facebook.png" width="55" height="55" border="0" /></a><a href="#"><img src="images/twitter.png" width="55" height="55" border="0" /></a></div>
</div>
<div id="news_content">Colocar aquí el contenido para id "news_content"</div>
<div id="menu_right">
<div class="menu_sec_right"><img src="images/button_right_1.png" width="228" height="79" />
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input type="text" name="textfield" id="textfield" class="textfield" />
<label for="textfield2"></label>
<input type="text" name="textfield2" id="textfield2" class="textfield" />
<input type="submit" name="button" id="button" value="Entrar" class="button1" />
<input type="submit" name="button2" id="button2" value="Registarse" class="button1" />
</form>
</div>
<div class="menu_sec_right"><img src="images/button_right_2.png" width="228" height="81" />
<div id="afiliados"><img src="images/button_pc.png" width="88" height="31" /><img src="images/button_pc.png" width="88" height="31" /><img src="images/button_pc.png" width="88" height="31" /><img src="images/button_pc.png" width="88" height="31" /><img src="images/button_pc.png" width="88" height="31" /></div>
</div>
<div class="menu_sec_right"><img src="images/button_right_3.png" width="229" height="81" />
<div id="publicidad"><img src="images/publi.png" width="131" height="600" /></div>
</div>
</div>
</div>
</body>
</html>

Saludos y gracias de antemano

ZoroRoronoa · #2 (**permalink**) 30/04/2011, 19:08

al div que esta dentro del "contenedor" y quieres que se estire al 100%
ponle

position:relative;
height:100%;

saludos