flotante - posicionamiento css ejemplos

La altura del div principal es cero incluso si tiene un hijo con alturas finitas

Question

Tengo un sitio web cuyo diseño se ha mostrado en el diagrama. El cuerpo consiste en un main container , que se compone de header , parent div y footer . El parent div contiene además varios child div como se muestra.

El problema es que la altura de todo el child div es finita. Pero el parent div no contiene nada más que los divs secundarios. Todos los divs secundarios son visibles pero la altura del div principal se muestra como cero. Tampoco estoy arreglando la altura del div principal dando un valor preespecificado, ya que puede causar errores si el número de hijos aumenta en el futuro.

El problema debido al tamaño cero de div principal es que mi divisor de pie de página sube y choca con el contenido del div principal. Esto se puede resolver dando un margen superior adecuado, pero esa no es la solución que estoy buscando.

¿Alguien puede sugerirme de alguna manera para que la altura del div principal cambie automáticamente según la altura de los divs secundarios presentes?

¡Comente si no estoy seguro al preguntar mi duda!

Answer 1

Intente agregar lo siguiente a su hoja de estilo:

#parentdiv:after { 
    content: " "; 
    display: block;
    clear: both;
} 

Como Daedalus sugirió en su comentario, probablemente estés flotando los divs para niños. Si es así, la línea anterior lo arregla.

El problema cuando flotas las cosas es que su elemento padre las "ignora".

La línea de arriba crea e inserta un elemento (pseudo-) en el #parentdiv que se empuja hacia abajo más allá de todos los divs flotantes. Entonces el padre div, que aunque ignora los niños flotados, no ignora este pseudo elemento: actuando como debería, se expande para contener el pseudo elemento. Ahora, dado que el pseudo-elemento está por debajo de todos los hijos flotantes, el div principal ocurre, o mejor aún, parece "contener" también a los hijos flotantes, que es lo que realmente quieres.

Answer 2

Parece que tienes un caso para la clase clearfix .

Así que supongo que está flotando el div hijo y es por eso que la altura del div padre es 0. Cuando usa flotantes, el padre no se adapta a la altura de los hijos.

Pero agregando la clase ''clearfix'' (por supuesto, debe tenerlo en su hoja de estilo) agregará un ''.'' al final (invisible, por supuesto) y tu padre tendrá mágicamente la altura correcta.

Tenga en cuenta que es multiplataforma, compatible con IE6 +, Chrome, Safari, Firefox, ¡lo que sea!

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}