Alargar el height del div de atrás al height actual del div de adelante

theliveisnitro · #1 (**permalink**) 01/12/2014, 11:08

Hola, tengo un pequeño problema y es que yo tengo un DIV digamos "container" que engloba todo el contenido y hace de fondo a su vez.
Y a dentro tengo muchos divs (todos los del container), pues hay por ejemplo ahora un div que se ha ampliado más de la cuenta (debido a que su contenido ha crecido) y el div de atrás no sé como hacer para que se alargue al mismo tamaño de height que el div de adelante.

Dejo a continuación un boceto por si me he explicado tal vez mal..

waltersele · #2 (**permalink**) 01/12/2014, 13:27

Es un poco difícil ayudarte si ver el código, y con la imagen no me aclaro si no hay una comparativa entre como lo tienes y como lo quieres.

EDITO:

Si lo que quieres es que se ajusten las alturas de varios elementos hermanos, lo que debes de hacer es poner al padre ( con sus prefixers )

display:flex;
justify-content:center;
align-items:stretch;

andresgarciadev · #3 (**permalink**) 01/12/2014, 17:04

en realidad practicamente no deberia ser necesario nada para que suceda como quieres
por lo tanto lo mas seguro es que el padre tiene un tamaño estatico o que el div de dentro del container tiene algo como un position fixed
seria de mucha ayuda que muestres el html y el css para poder determinar de manera correcta el problema

theliveisnitro · #4 (**permalink**) 02/12/2014, 07:40

Sí, perdón!! Dejo el código a continuación:

Código HTML:

Ver original<body>
   <div id="container">
        <div id="container_contenido">
              (aquí se llama a archivos php que son contenidos y traen muchos divs entre ellos el DIV que sobre sale)
              <div id="listado">
                    <div id="dato">...</div>
                    <div id="dato">...</div>
                    <div id="dato">...</div>
              </div>
        </div>
   </div>
</body>

Y el CSS de todo esto:

Código CSS:

Ver original#container
{
    margin:auto;
    width:1200px;
    height:1350px;
    background-color:#f9f9f9;
}
 
#container_contenido
{
    padding:20px;
}
 
#listado
{
    float:left;
    margin-top:20px;
    width:800px;
    padding:10px;
    margin-bottom:10px;
    background-color:#FFF;
    border:1px solid #CCC;
}
 
#dato
{
    width:100%;
    float:left;
    margin-bottom:20px;
    border-bottom:1px solid #DFDFDF;
    padding-bottom:10px;
}

Si hace falta algo más lo pongo, todabía no he encontrado la solución y he ido probando cosas...

pzin · #5 (**permalink**) 02/12/2014, 09:34

Quita la altura y añade algún tipo de clearfix. El más común suele ser overflow: hidden.