altura 100% en div

dooplanillo · #1 (**permalink**) 29/07/2011, 05:47

Buenas a todos, tengo un problema con alturas absolutas en los divs.
La estructura sería la siguiente

Código:

<html>
<body>
<div id="wrap">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>

y su css sería de esta manera:

Código:

html,body{width:100%;height:100%;}
wrap{width:100%;height:100%;}
content{width:x(no importa);height:100%;}

El caso es que el content se alarga bastante, el problema es que solo hasta un límite. Cuando el content se va llenando de "contenido" y este supera en altura a lo que da de si el div "content", este no crece más.

¿sabéis por donde pueden ir los tiros?
He probado con el típico <div class="clear"></div> donde clear:both y nada.
También he visto otra solución al tema del div clear que se pone directamente en div que contiene las capas "flotantes" para que crezca a su altura pero sigue sin crecer más de lo que crecía y al tener overflow:hidden, pues todo lo que lo supera no se ve, logicamente.
Sería esta clase:
.clearfix{zoom:1;overflow:hidden;}

IsaBelM · #2 (**permalink**) 29/07/2011, 06:11

a html y body quitale el height
en wrap puedes usar la propieadad min-height:100%;
y en content height:auto;

dooplanillo · #3 (**permalink**) 29/07/2011, 06:21

Muchas gracias Isabel. Funciona a la perfección. :)