Altura dinámica de un div

bNd170 · #1 (**permalink**) 05/08/2010, 11:22

Buenas gente, algo tan sencillo como hacer que un div se estire a lo alto dependiendo del contenido que se le introduzca esta dandome problemas.

Código HTML:

Ver original<div class="cuerpo">
    <div class="menu">
    </div>
        <div id="body">
        </div>
</div>

Código CSS:

Ver originaldiv.cuerpo {width: 805px; height: auto; background:white; margin: 0px auto; padding-top:15px}

Que es lo que hago mal para que el div Cuerpo no se estire tanto como su contenido lo requiera? He probado también poniendo min-height: 370px (Que es mas o menos como debe quedar deffault) pero nada, si pongo el min-height es como si cogiese esta propiedad como el height ya que no se estira.

¿ Algún consejillo?

TheDark03 · #2 (**permalink**) 05/08/2010, 11:28

.cuerpo{width:805px;height:auto;background-color:#fffff;margin:0 auto;padding-top:15px;}

no te deberia dar error...

q explorador usas?? :S

Saludos

bNd170 · #3 (**permalink**) 05/08/2010, 11:33

Pues uso Google Chorme como explorador por defecto pero lo he mirado igualmente con Mozilla e IE y nada. Es algo que no consigo comprender aún.

bNd170 · #4 (**permalink**) 05/08/2010, 11:46

Sigo haciendo pruebas y... los divs internos del cuerpo tienen sus float correspondientes left uno y right el otro, si borro las propiedades css de ambas, el div cuerpo se estira como deberia.

Las propiedades de los divs internos son:

Código CSS:

Ver originaldiv.cuerpo div.body {float:right; text-align:left; width:640px}
div.cuerpo div.menu {float:left; border-right:solid 1px #37a9d4; min-height: 400px; width: 150px; text-align: left; padding-left: 7px}

Impostor · #5 (**permalink**) 05/08/2010, 11:54

Buenas,

estudia un poco sobre la propiedad overflow

Un saludo

bNd170 · #6 (**permalink**) 05/08/2010, 12:03

Impostor, ¿estas respuestas le sirven a alguien de algo? Conmigo ahorratelas porfavor, se lo que hace esa propiedad y se que no tiene nada que ver en dicho problema.

TheDark03 · #7 (**permalink**) 05/08/2010, 12:05

mira tus estilos no me parece q tengan error...
pero te recomiendo q no hagas esto

Código CSS:

Ver originaldiv.cuerpo div.body {float:right; text-align:left; width:640px}
      div.cuerpo div.menu {float:left; border-right:solid 1px #37a9d4; min-height: 400px; width: 150px; text-align: left; padding-left: 7px}

solo crea las clase y ya
.cuerpo{....}
.body{...}
.menu{...}

e igual se utilizan

<div class="cuerpo">
<div class="body"></div>
<div class="menu"></div>
</div>

ahora sabes solucionalo agregando float:left; tmb margin:0 auto; atu div cuerpo se te soluciona el problema...

Saludos

x siacaso agrega esto a tu css

Código CSS:

Ver original*{
margin: 0;
padding: 0;
}
 
html {
height : 100&#37;;
}
body {
height : 100%;
}

bNd170 · #8 (**permalink**) 05/08/2010, 12:19

El problema es que el div cuerpo debe ir centrado :D

Uso el CSS de esta manera por si me apetece usar la clase o el id usado anteriormente para otras cosas en otras zonas. Es practico y me ha evitado ya muchos quebraderos de cabeza.

TheDark03 · #9 (**permalink**) 05/08/2010, 12:21

Cita:

Iniciado por bNd170

El problema es que el div cuerpo debe ir centrado :D

le das
.cuerpo{margin:0 auto;...y el resto de tus propiedades;}

Saludos

bNd170 · #10 (**permalink**) 05/08/2010, 12:26

Cita:

Iniciado por bNd170

Código CSS:

Ver originaldiv.cuerpo {width: 805px; height: auto; background:white; margin: 0px auto; padding-top:15px}

Por si no lo habias leido bien.

TheDark03 · #11 (**permalink**) 05/08/2010, 12:34

wenooo esto ya tiene q acabar de una vez....

EJEMPLO:

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&iacute;tulo</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#wrapper{width:1024px;height:auto;margin:0 auto;}
#content{width:1022px;height:500px;border:1px solid #FF0000;}
.contentsuperior{margin:0 auto;height:257px;width:1020px;border:1px solid #000000;}
.contentmap{float:left;width:260px;height:245px;border:1px solid #666666;margin:5px 0 0 5px;}
.contentbanner{float:left;width:740px;height:245px; background:url(images/banner/banner2.jpg) no-repeat;margin:5px 0 0 5px;border:1px solid #666666;}
</style>
<body>
<div id="wrapper">
<div id="content">
        <div class="contentsuperior">
            <div class="contentmap"></div>
            <div class="contentbanner"></div>
        </div>
</div>
</div>
</body>
</html>

Saludos...

PD:creo q no has reseteado tu css

bNd170 · #12 (**permalink**) 05/08/2010, 12:40

Mi CSS está cargadito en el hosting y funcionando pefectamente.

El codigo de ejemplo que has puesto no es lo que quiero, de hecho al poner a el div content el height:auto se come parte de el div de contentbanner.

El contenido en mi pagina se muestra solo que sin fondo blanco (Unicamente los 15px del padding)

TheDark03 · #13 (**permalink**) 05/08/2010, 12:54

...a mi me funciona correctamente tanto en el chrome firefox e IE y opera

Saludos

jomaruro · #14 (**permalink**) 06/08/2010, 14:43

Hola:

Cita:

Iniciado por TheDark03

...a mi me funciona correctamente tanto en el chrome firefox e IE y opera

¿Te funciona?

¿Con el <style> fuera del <head>?

Cita:

Iniciado por bNd170

Mi CSS está cargadito en el hosting y funcionando pefectamente.

¿Perfectamente? Entonces ¿Dónde está tu duda?

Como no pones tu código completo he interpretado que necesitas algo así:

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>
            Altura Dinámica
        </title>
 
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            
            p {
                margin:5px;
                text-align:justify;
            }
 
            #contenedor{
                width:1040px;
                height:auto;
                margin:0 auto;
                background-color: #f00;
                overflow:auto;
            }
 
            .menu{
                margin:5px;
                width:25%;
                background-color: #00ff00;
                float:left;
            }
 
            .cuerpo{
                margin:5px;
                float:left;
                width:73%;
                background-color:#0000ff;
            }
        </style>
    </head>
    
    <body>
        <div id="contenedor">
            <div class="menu">
                <ul>
                    <li>Opción 1</li>
                    <li>Opción 2</li>
                    <li>Opcion 3</li>
                </ul>
            </div>
            <div class="cuerpo">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a mauris enim. Donec faucibus dapibus adipiscing. Sed gravida lorem ac ligula molestie eleifend. Vestibulum adipiscing, lorem vitae tincidunt rutrum, magna justo aliquet dui, a tincidunt augue purus eu lectus. Vestibulum vitae est vitae arcu posuere eleifend. Curabitur est lectus, ornare sed lobortis sit amet, viverra ut turpis. Aliquam erat volutpat. Mauris pharetra nibh ac magna laoreet at pretium nisi blandit. Integer sed lacus ornare quam varius aliquet ac in erat. Aliquam sollicitudin sodales blandit. Etiam vel consequat turpis. Etiam dictum est at diam convallis eget aliquet eros blandit. Aliquam ante augue, convallis ut tincidunt non, pretium in metus. Curabitur consectetur, nisi eu vestibulum rutrum, orci mauris auctor diam, vitae condimentum nisl lorem sit amet tortor. Ut a lorem nibh. Cras et ligula fringilla dui consequat scelerisque. Pellentesque ut consequat nisi.</p>
                <p>Pellentesque in lectus vel eros mattis lacinia quis at quam. Donec nisl leo, ornare eu varius et, egestas a arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut nisl sed justo aliquam rutrum. Aliquam ac dui ac risus blandit semper. Donec ac tellus ligula. Sed vel accumsan nisi. Nam eget eros at turpis fringilla sodales vel eu felis. Integer sed felis nulla. In viverra mauris at lacus adipiscing eu tristique augue dictum. Sed interdum ullamcorper justo, sed aliquet urna imperdiet vitae. Nunc sed adipiscing nisl. Donec faucibus felis ut leo feugiat tempor. Quisque odio urna, aliquam sed pretium ut, pellentesque id arcu. Morbi bibendum, velit ac tempus posuere, risus eros tempor lectus, ut pellentesque lectus elit nec neque. Quisque ut ligula diam. Nulla fringilla varius elit ac hendrerit. Pellentesque ligula risus, scelerisque sit amet pellentesque venenatis, dignissim a lectus. Praesent quis magna et tortor iaculis porttitor a et mi.</p>
                <p>In convallis molestie tortor, sed vehicula erat posuere in. Duis quis tellus at tellus posuere fringilla. Nunc auctor pharetra porta. Aliquam purus tellus, tempor nec imperdiet ac, ullamcorper a enim. Aliquam erat volutpat. Donec tincidunt semper tempor. Pellentesque dolor velit, tincidunt a luctus vulputate, luctus id purus. Integer interdum posuere luctus. Donec rutrum nunc vel metus elementum id dapibus libero interdum. Nunc odio quam, aliquam pretium elementum in, ornare eu lectus. Aenean non ligula lectus. Fusce aliquet lectus sit amet velit rutrum sodales. Donec non sem dolor, a mollis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros lorem.</p>
                <p>Duis vehicula egestas hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In consectetur scelerisque quam, cursus porttitor diam blandit ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Sed a quam mauris, in porta odio. Duis erat sem, rhoncus adipiscing rutrum vel, tempus nec quam. Integer hendrerit dignissim urna, ac viverra nulla interdum eget. Duis auctor posuere quam, et euismod leo elementum vel. Integer tincidunt est a elit suscipit quis elementum ligula fermentum. Morbi ultricies nibh facilisis turpis consequat tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent auctor tempor nisl ac imperdiet. Quisque eget urna venenatis mauris porta porta. Fusce arcu enim, eleifend sed rutrum id, ultrices eget velit. Proin sit amet mauris vel elit venenatis adipiscing et vitae sapien. Mauris vel arcu in nibh cursus convallis bibendum ac elit.</p>
                <p>Ut dignissim elementum lectus, in ultricies orci cursus id. Morbi sapien lectus, rhoncus eleifend tempor ultricies, bibendum id eros. Suspendisse id sagittis velit. Aliquam adipiscing mattis elit, eget euismod orci venenatis sit amet. Fusce nec felis quis ante pretium ullamcorper. In tortor lacus, lacinia eu rhoncus faucibus, fringilla ac leo. Pellentesque in arcu purus, non molestie elit. Nullam non risus et ligula luctus convallis. Suspendisse erat nisl, porta vel ultricies in, mollis at tortor. Aliquam pretium tincidunt urna vitae porttitor. Morbi ullamcorper nunc at mi varius ac varius augue gravida. Etiam a ullamcorper metus. Vivamus at massa erat, vel rhoncus nibh. Donec nec arcu metus. Etiam id tortor vel risus adipiscing aliquam.</p>
            </div>
        </div>
    </body>
</html>

Pruebalo y me cuentas ¿Ok?

Saludos.

tredio · #15 (**permalink**) 06/08/2010, 16:26

holas, algo que vi es que haces esto "<div id="body">" estas referenciando el div ese con un id, cuando le das el estilo lo tomas como si fuese una clase "div.cuerpo div.body", no se si eso es lo que esta causando el problema. pero podrías también tratar algo así.

Código HTML:

Ver original<div class="cuerpo">
    <div class="menu">
    </div>
        <div class="body">
        </div>
   <div class="ajustar"></div>
</div>

usando este estilo para el div ajustar

Código CSS:

Ver original.ajustar{ clear:both;}