posicion - CSS contenedor div no obtiene altura

posicionar div css

Question

Quiero que mi contenedor div obtenga la altura máxima de la altura de sus hijos. sin saber qué altura tendrán las divisiones para niños. Estaba probando JSFiddle . El contenedor div está en rojo. que no aparece. ¿Por qué?

Answer 1

Agregue la siguiente propiedad:

.c{
    ...
    overflow: hidden;
}

Esto obligará al contenedor a respetar la altura de todos los elementos dentro de él, independientemente de los elementos flotantes.
http://jsfiddle.net/gtdfY/3/

ACTUALIZAR

Recientemente, estaba trabajando en un proyecto que requería este truco, pero necesitaba permitir que se mostrara el desbordamiento, por lo que puede usar un pseudo-elemento para borrar sus flotadores, logrando efectivamente el mismo efecto y permitiendo el desbordamiento de todos los elementos.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

Answer 2

Estás flotando los niños, lo que significa que "flotan" frente al contenedor. Para tomar la altura correcta, debe "limpiar" el flotador

El estilo div = "clear: both" despeja el flotante y le da la altura correcta al contenedor. ver http://css.maxdesign.com.au/floatutorial/clear.htm para más información sobre carrozas.

p.ej.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

Answer 3

Intente insertar este div de compensación antes de la última </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

Answer 4

La mejor solución y la más a prueba de balas es agregar ::before y ::after pseudoelementos al contenedor. Entonces, si tiene, por ejemplo, una lista como:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

Y cada elemento de la lista tiene float:left property, luego debe agregar a su css:

.clearfix::after, .clearfix::before {
     content: '''';
     clear: both;
     display: table;
}

O puede intentar display:inline-block; propiedad, entonces no es necesario agregar ningún clearfix.

Answer 5

No es tan fácil?

.c {
    overflow: auto;
}