2011-12-15 14 views
5

Esperaba que alguien pudiera echar un vistazo a mi sitio y decirme qué puede estar pasando aquí. El problema que estoy teniendo es que #bodybodyrap no se extiende automáticamente a la altura de uno de sus hijos, #contentWrap. #contentWrap se extiende bien para llenar todo el contenido de esa página, pero esto no llega al padre, #bodyWrap. Gracias de antemano por cualquier información.Altura de CSS: auto no funciona con mi envoltorio div

http://www.jacobsmits.com/placeholderRX/index.html

Respuesta

19

Debe añadir un div más clara antes de que sus recipientes con tapa:

<div style="clear:both;"></div> 

elementos flotantes no afectará a la altura del contenedor ... coz es flotante;)

Ejemplo de trabajo vivo: http://jsfiddle.net/LBH5h/

Ejemplo:

<div id="content"> 
    <!-- floating child --> <div style="float:left;"><!-- floating child content --></div> 

    <div style="clear:both;"></div> 
</div> 
+0

Gracias! Siempre utilizo una clase "clara" cuando sé que voy a flotar elementos pero me lo perdí cuando estaba experimentando y simplemente no podía ver el problema esta tarde jaja. Sin embargo, ¿hay alguna manera de conseguir que un elemento flotante, como la cinta de navegación, se extienda hasta el final de la página? Verifique el sitio nuevamente para ver a qué me refiero. – Throttlehead

+0

Probablemente terminaré usando Javascript para configurar la altura de la altura de carga de trabajo en la altura de ContentWrap. Mucho más fácil que luchar con divs y Z-index posicionados absolutos. – Throttlehead

+0

Es un poco difícil obtener tiempo y verificarlo ahora ... trabajando en una fecha límite. Pero una forma fácil es incluir la imagen de la cinta de navegación a su fondo de contenido de mosaico. ;) De lo contrario, creo que tendrá que cambiar la estructura html y jugar con css display: table options. O lea la altura del contenido con jQuery ... y configure el navwrap como similar ... incluso puede mostrar una animación;) ¡Salud! ¡Amigo! –

4

Si algo generalmente no ajuste automático de la altura para mí, entonces voy a solucionar problemas con estos pasos.

  1. establecer la altura de algo ridículo (1000 píxeles)
  2. Si que marcan la diferencia a continuación, comprobar Todos los flotadores
  3. Añadir un clear: both; declaración.
  4. Si todavía no funciona, agregue colores de borde por separado a todos sus divs. Debería ayudarlo a ver cuál es la configuración correcta de la altura y qué es arruinar el sitio web.
+0

Hoy me pasó lo mismo, porque había un 'display: absolute' en el contenedor, lo cambié a' relative' y funcionó. – Vadorequest

Cuestiones relacionadas