Un div con height 100% HTML y CSS

Supongamos que tenemos el siguiente escenario:
– Una barra lateral en un div llamado “menu”.
– Un div en el que se muestra el contenido llamado “principal”.
– Un div general que contiene a los dos elementos anteriores, llamado “contenedor”.

height-100

La tarea es que el div “menu” siempre tenga el 100% de alto. Dado que hacer simplemente height:100% no funciona hay que recurrir a otros trucos.

El truco es el siguiente:
Aplicaremos a la columna las propiedades de “margin-buttom” y “padding-bottom”. El margin es un margen exterior que no afecta el tamaño de la caja (aleja los elementos que están fuera del div) y el padding es un margen interior que se suma al tamaño de la caja (separa los elementos internos del borde del div). Teniendo en cuenta que “margin” acepta valores negativos, daremos este estilo a al div menu:

#menu
{
    float: left;
    padding-bottom: 30000px;
    margin-bottom: -30000px;
}

El padding empujará la columna, y el margin las va a volver a cuadrar en su sitio. Para que ésto funcione se necesita además aplicarle al contenedor lo siguiente:

#contenedor
{
    overflow: hidden;
}

De esta manera se ocultará todo lo que sobre. La columna irá creciendo a medida que crezca el contenedor.

fuente:
http://www.npicasso.com/blog/?p=65

Deja un comentario