height: auto y height: 100% no funciona

eybel · #1 (**permalink**) 09/02/2012, 17:51

Siempre uso un height arreglado con pixels, pero esta vez necesito usar auto o 100% y no me funciona..

Probe con pober html y body heigth 100% y no funciona..

Tengo un container que tendria que cubrir todo, tengo divs adentro como "header", productos (este tiene 3 divs adentro) y nada mas.

Pero el div container que tendria que tener fondo blanco, con "auto" me llega a 859 px o algo asi. Osea me llega a cubrir todos los divs pero no el div que se llama "bottom" osea se termina como que no detecta contenido con "auto" ya que el contenido aparece con fondo gris que seria el fondo del tag "body" que pasa con height auto o height 100%? ninguno de los 2 me funciona...

Código PHP:

   
<html lang="en" dir="ltr">

<head>

<body>

 
<div id="container">

     

    <div class="header">

    </div> (header)

 
          <div class="product">

           

                <div class="left-column">

                </div>

 
                <div class="right-columm">

                </div>      

  

               <div class="bottom">

                </div> 

 
         </div> (product)

 
</div> (container)

 
</body>

memoadian · #2 (**permalink**) 09/02/2012, 18:04

Código CSS:

Ver original#container{overflow:hidden}

eybel · #3 (**permalink**) 10/02/2012, 10:02

funciono, gracias! pero no tiene sentido la verdad. overflow hidden? porque funciona eso?

ArturoGallegos · #4 (**permalink**) 10/02/2012, 10:25

cuando flotas los elementos (float) , el elemento padre es incapaz de tomar la altura de sus hijos por lo que necesitas limpiar el float para que el padre cresca.

hay dos formas de hacerlo, la primera no muy recomendable ya que es un tanto sucio es utilizar la propiedad css clear (left, right o both)

Código HTML:

Ver original<div>
    <div id="columL"></div>
    <div id="columR"></div>
    <div style="clear: both;"></div>
</div>

y la segunda forma mas optima es utilizar overflow (hidden o auto) en el elemento padre

Código HTML:

Ver original<div style="overflow: hidden;">
    <div id="columL"></div>
    <div id="columR"></div>
</div>

eybel · #5 (**permalink**) 10/02/2012, 10:38

siempre trabaje con pixeles arreglados osea 1600 px height y ahjora q trabajo con height auto o 100% no me funcionaba. Busque y si veo que esa es la solucion correcta. Veo que es un problema muy comun el de que el container no sabe la altura hasta que se le pone overflow: hidden..

Entendi el problema y la solucion, lo unico que no entiendo es la herramienta usada.

Porque usamos overflow: hidden?

Esta propiedad por lo que yo se, "esconde" el contenido excedido cierto? osea, cuando tenes una box de 200 x 200 y contenido mas grande al poner "hidden" no lo estaria visualizando, al poner scroll muestra las scroll bars y al poner auto es automatico.

Osea que eso me confunde un poco, no entiendo porque overflow: hidden "limpia el float"

De cualquiera manera ahora ya se el "truquito" lo voy a empezar a usar.

Gracias!!

memoadian · #6 (**permalink**) 10/02/2012, 10:46

de nada, yo tampoco se por que es overflow:hidden, yo también me lo he preguntado muchas veces, pero hay cosas que no se encesitan saber. Por lo menos yo no.