ayuda con altura variable en div´s

yoelnacho · #1 (**permalink**) 01/02/2008, 10:18

Hola tengo el siguiente problema con las alturas variables.
dejo la url con el ejemplo para que vean el código. los css estan dentro del html
el problema

separe todo por colores, y estan comentados en el código.

El problema: Necesito que el color amarillo (altura fija) siempre se encuentre en la parte inferior total dentro del color azul (altura variable), y que el color verde ocupe desde arriba hasta el color amarillo (no se vería el color azul).

Ya probe con altura 100% y no me da bolilla. creo que el problema viene por el lado de las "position".
Gracias, por leer, y si a alguien se le ocurre algo excelente!!!!
Saludos.-

espero haber sido claro

hades87 · #2 (**permalink**) 01/02/2008, 10:42

y si al verde le metes la altura manual os ea de 426 px?

yoelnacho · #3 (**permalink**) 01/02/2008, 10:54

Gracias por contestar hades87.
El problema es que el color azul (su altura es variable). y su contenido es dinámico.

Saludos.-

hades87 · #4 (**permalink**) 01/02/2008, 10:55

pero el contenedor azul no tiene un height ya establecido?

y si pruebas así:

Código HTML:

<!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>ayuda</title>
<style type="text/css">
<!--
body {
    margin:0 auto;
    background-color: #CCC;
}
.clear {clear:both;}
/*azul*/
#content-content {
margin:auto;
width:947px;
background:blue;        
height:450px;/*altura fija no se puede cambiar*/                                    
}
/*verde*/
#content-portada {
padding:0 12px 0 12px;
background:green;
width: auto;
height: 100%;
}
/*amarillo*/
#content-foot {
background-color:#FFFF00;
height:24px;/*altura fija no se puede cambiar*/
width:947px;
clear:both;            
float:left;
bottom:0;
}
-->
</style>
</head>
<body>
    <div id="content-content">
        <div id="content-portada"></div>
        <div id="content-foot"></div>
    </div>
</body>
</html>

yoelnacho · #5 (**permalink**) 01/02/2008, 11:05

no perdón, ahí subi el último código, solo tiene una altura mínima.

min-height:450px;/*altura fija no se puede cambiar*/

saludos.-

hades87 · #6 (**permalink**) 01/02/2008, 11:12

pero qeu diferencia hay entre min-height y height? yo creo que es lo mismo.

yoelnacho · #7 (**permalink**) 01/02/2008, 11:21

no se, creo que min-height define un mínimo de altura. Igualmente el contenido es dinámico, y no posee una altura fija. lo que tengo que averiguar es como variar los otros divs para que se acomoden al total de altura del contenido dinámico.-

saludos

hades87 · #8 (**permalink**) 01/02/2008, 11:23

pues al verde ponle un height: auto, de esa forma se adapata a lo que le pongas. y a todos ponles lo mismo :P