Div con 100% de alto css

truman_truman · #1 (**permalink**) 02/08/2011, 10:38

Hola, esto me está volviendo loco, no soy bueno para el diseño, lo mio es la programación, en fin, creo que la mejor forma de graficar lo que quiero hacer es con una imagen

Bien, lo que quiero es que el div Verde tome el alto del div Gris, independientemente de lo que mida el celeste.

Espero que se entienda
Saludos
Gracias de antemano

Elmasterivan · #2 (**permalink**) 02/08/2011, 11:56

Código HTML:

Ver original<!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>Documento sin título</title>
<style type="text/css" >
 
#content{
    width:350px;
    height:500px;
background-color:#CCC;      
}
.celeste{
    background-color:#6FF;
    float:left;
    width:175px;
    height:250px;
}
 
.verde{
    width:175px;
    height:500px;
    float:left;
    background-color:#093;
}
 
</style>
</head>
 
<body>
<div id="content">
<div class="celeste"></div>
<div class="verde"></div>
 
 
</div>
</body>
</html>

ZoroRoronoa · #3 (**permalink**) 02/08/2011, 12:07

con dimensiones definidas, usas tu.

Pero para que se adapte ponle al .verde position:relative
y un height de 100%.

Saludos.

truman_truman · #4 (**permalink**) 02/08/2011, 12:12

Creo que no se entendió lo que dije o quise decir,

quiero que el verde siempre tenga alto de 100%, siempre......
es decir, que tenga siempre el alto del Gris,

El celeste será variable, en donde se mostrará contenido de la base de datos, esto quiere decir que nunca medirá lo mismo de alto.

Elmasterivan · #5 (**permalink**) 02/08/2011, 12:12

Oni Giri!!!

truman_truman · #6 (**permalink**) 02/08/2011, 12:17

Cita:

Iniciado por ZoroRoronoa

con dimensiones definidas, usas tu.

Pero para que se adapte ponle al .verde position:relative
y un height de 100%.

Saludos.

No funciona

andresdzphp · #7 (**permalink**) 02/08/2011, 20:22

Te dejo un código:

Código CSS:

Ver original<!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>Ejemplo</title>
 
        <style type="text/css">
 
            html,body{
                margin:0px;
                height:100%;
            }  
            body {
                text-align: center;
            }
 
            #contenedor {
                margin: 0 auto;
                text-align: left;
                width: 960px;
                background: #cccccc;
                height: 1200px;
            }
 
            #celeste, #verde {
                float: left;
            }
 
            #celeste {
                background: #009999;
                width: 500px;
                margin: 0 20px 0 20px;
                height: 500px;
            }
 
            #verde {
                background: #009933;
                width: 400px;
                height: 100%;
                margin-right: 10px;
            }
 
        </style>
 
    </head>
    <body>
 
        <div id="contenedor">
 
            <div id="celeste">
                Div celeste columna izquierda
            </div>
            <div id="verde">
                Div verde columna derecha
            </div>
 
        </div>
    </body>
</html>

truman_truman · #8 (**permalink**) 02/08/2011, 22:28

Muchas gracias, pero lo solucioné poniendole una imagen de fondo al contenedor

Saludos