Altura del div padre es cero incluso si tiene hijo con alturas finitas
Tengo un sitio web cuyo diseño se ha mostrado en el diagrama. El cuerpo consiste en un main container, que comprende de header, parent div y footer. El parent div contiene además varios child div como se muestra.
El problema es la altura de todos los child div es finito. Pero el parent div no contiene nada más que los divs del niño. Todos los divs hijo son visibles, pero la altura del div padre se muestra para ser cero. Tampoco estoy fijando la altura del div padre dando algunos pre-especificado valor, ya que puede causar error si el número de niños aumenta en el futuro.
El problema debido al tamaño cero del div padre es que mi div de pie de página está subiendo y chocando con el contenido del div padre. Esto se puede resolver dando un margen adecuado, pero no es la solución que estoy buscando.
Puede alguien sugerirme alguna manera para que la altura del div padre cambie automáticamente de acuerdo con la altura de los div hijos presentes.
Por favor, comente si no estoy claro en preguntar mi duda !
2 answers
Parece que tienes un caso para la clase clearfix.
Así que supongo que estás flotando el div hijo y es por eso que la altura del div padre es 0. Cuando usa flotadores, el padre no se adapta a la altura de los niños.
Pero al agregar la clase 'clearfix' (por supuesto que necesita tenerlo en su hoja de estilo) agregará un '.'al final (invisible, por supuesto) y su padre mágicamente tendrá la altura correcta.
Nota, es multiplataforma, compatible 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%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-22 04:04:52
Intente agregar lo siguiente a su hoja de estilos:
#parentdiv:after {
content: " ";
display: block;
clear: both;
}
Como Dédalo sugirió en su comentario, probablemente estás flotando las divs infantiles. Si es así, la línea anterior lo arregla.
El problema cuando flotan cosas es que su elemento padre las "ignora".
La línea anterior crea e inserta un (pseudo)elemento en el #parentdiv que es empujado hacia abajo más allá de todos los divs flotantes. Entonces el div padre, que aunque ignora a los hijos flotantes, no ignora esto pseudo elemento-actuando como debería, se expande para contener el pseudo elemento. Ahora, ya que el pseudo-elemento está debajo de todos los hijos flotantes, el div padre sucede, o mejor aún, parece "contener" los hijos flotantes también, que es realmente lo que quieres.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-05 23:03:26