¿Por qué el alto de mi etiqueta div se calcula como 0 en Chrome?

Question

Estoy trabajando en una página web (link text), pero estoy teniendo problemas con la propiedad height en Google Chrome. Si ve la página, notará que no hay un color de fondo. Esto se debe a que #mainContent tiene una altura de 0px. En Internet Explorer, este no es el caso. ¿Alguien tiene ideas?

Answer 1

Esto se debe a que el contenido interno se está flotando. Los elementos principales no tienen la altura de los hijos flotantes. Intente agregar overflow: hidden; al #mainContent css.

Answer 2

try definir explícitamente el valor por defecto

height: auto;

Answer 3

Todo dentro de #mainContent está flotando. Los flotadores no hacen que su contenedor cambie de tamaño. La solución más sencilla es añadir un derecho claro antes de esa fecha el final de #mainContent así:

<div id="mainContent"> 
<!-- inner bars --> 
<div style="clear:both;"></div> 
</div> 

Answer 4

Tengo la sensación de que será algo que ver con el contenido de la #mainContent no div empuja hacia afuera el contenedor correctamente. Debería poder arreglar esto de diferentes maneras, como usar un div de compensación.

Añadir el siguiente CSS:

.clearfix{ 
    clear:both; 
} 

y añadir un div con la clase clearfix antes de cerrar la div maincontent:

<div id="mainContent"> 
    <div id="rightSide"> 
    ... 
    </div> 
    <div id="content"> 
    ... 
    </div> 
    <div class="clearfix"/> 
</div> 

Esto debería recordar al navegador para forzar la apertura de la div mainContent para encajar su contenido.

Answer 5

Jaja, esta será una pregunta difícil de verificar como respuesta porque hay una variedad de maneras de despejar carrozas. (También puede probar #mainContent flotante también)

Aquí está el maravilloso quirksmode article.