Juglar

La propiedad height indica la altura del elemento, y solo se aplica a elementos de bloque. Su valor por defecto es auto, es decir, lo fija la extensión de su contenido.

Si damos a la altura del elemento un valor en porcentaje, se referirá a la altura de su elemento contenedor. Luego, para que cualquier elemento al que asignemos height:100% ocupe todo el alto de la pantalla, tanto html como body tienen que tener una altura del 100%.

Si en un elemento fijamos altura menor de lo sería necesario para abarcar su contenido, éste lo desbordará y se comportará según fijemos en la propiedad overflow (por defecto será visible). Pasa lo mismo cuando fijamos la altura de un elemento al 100%: si el contenido del elemento es demasiado extenso, lo desbordará.

La solución está en la propiedad min-height que indica la altura mínima que tendrá el elemento. Si el contenido precisa más espacio, el elemento se estirará para abarcarlo. Por lo que, si queremos que un elemento ocupe el 100% de la altura de la pantalla, pero que se adapte a las dimensiones de su contenido si éste requiere más espacio, deberíamos utilizar min-height:100%. El problema es que IE no reconoce min-height. Es más, IE interpreta la propiedad height como si fuera min-height.

Solución:

Primero asignamos el min-height para el elemento, propiedad que solo reconocerán los navegadores avanzados. A continuación, utilizamos el selector * html [elemento] para definir la propiedad height sólo para IE, ya que otros navegadores no la interpretan.

html,body{
height:100%;
}
div{
min-height:100%;
}
* html div{
height:100%;
}

Así conseguimos que en los principales navegadores la altura del div sea del 100%, para cualquier extensión del contenido.

Caótico Neutral: Elementos con altura 100%