El div del contenedor CSS no obtiene la altura

116

Quiero que mi contenedor div obtenga la altura máxima de la altura de sus niños. sin saber qué altura divva a tener el niño . Estaba probando en JSFiddle . El contenedor divestá en rojo. que no aparece. ¿Por qué?

css css-float liquid-layout

— Neel Basu
fuente

282

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 en su lugar, puede usar un pseudoelemento para limpiar sus flotadores, logrando efectivamente el mismo efecto mientras permite el desbordamiento en todos los elementos.

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

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

— Nightfirecat
fuente

8

Básicamente, agregar esta propiedad obliga al cuadro exterior a ignorar la regla que tienen los contenedores flotantes, donde no se calculan en altura para contenedores, y aplicarlos para el dibujo de fondo completo.

— Nightfirecat

4

Wow, yo estaba como, "¿Qué? Eso no funcionará". Pero estaré maldito. Pensé totalmente que no iba a comportarse correctamente. Gracias

— fie

1

¿No es esto realmente hacky? Para mí, frustra el propósito del desbordamiento. No entiendo por qué esta es la respuesta correcta y la más votada.

— Andrew Weir

3

@AndrewWeir Admito que, hasta ahora, no estaba completamente seguro de por qué este método de expandir contenedores para considerar correctamente los flotadores en su tamaño funcionó. De acuerdo a varias fuentes , parece que esto causa un elemento para cambiar su modo de representación, de permitir el desbordamiento visible para no hacerlo, y al hacerlo, estos elementos de las fuerzas para no permitir que se desbordan.

— Nightfirecat

2

La primera forma, usar overflow, funciona para mí. La segunda forma TAMBIÉN funciona y parece menos riesgosa en caso de que tenga un desbordamiento en el futuro. Ojalá pudiera votar a favor dos veces.

— Tyler Collier

28

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

El div style = "clear: both" borra el flotante y le da la altura correcta al contenedor. consulte http://css.maxdesign.com.au/floatutorial/clear.htm para obtener más información sobre los flotadores.

p.ej.

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

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

— Yoeri
fuente

Esto claro: ambos; La cosa parece ser una solución adecuada para la altura del contenedor, porque el problema son los niños flotantes. Así que este enfoque parece mejor que el desbordamiento: oculto; uno arriba.

— Ronnie Depp

Gracias @Yoeri por compartir esta sencilla solución. Estoy buscando la misma solución para mi nuevo diseño, ya que han pasado casi 6 años desde la última vez que diseñé un diseño web después de centrarme únicamente en la perspectiva del desarrollo PHP en lugar del diseño.

— Ronnie Depp

20

¿No es tan fácil?

.c {
    overflow: auto;
}

— Antonio Romero Oca
fuente

Sí lo es: D. Gracias

— Alauddin Ahmed

4

Intente insertar este div de compensación antes del último </div>

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

— sotavento
fuente

3

La mejor y la solución más a prueba de balas es añadir ::beforey ::afterpseudoelements al contenedor. Entonces, si tiene, por ejemplo, una lista como:

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

Y todos los elementos de la lista tienen float:leftpropiedades, entonces debes agregar a tu css:

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

O puede probar la display:inline-block;propiedad, entonces no necesita agregar ningún clearfix.

— Agata
fuente