div100Alguna vez maquetando hemos necesitado hacer que un div nos ocupe el 100% del alto de una capa, o de toda la web, y normalmente, si no se sabe este pequeño truco, hemos tenido que hacer cosas raras. Pues bien, la solución es bastante sencilla, y es la siguiente.

Para conseguir que cualquier div que tengamos en nuestra web pueda tener el 100% del alto de la capa en la que se anida, solo tenemos que darle el 100% de altura al html y al body de en nuestra hoja de estilos de la siguiente forma:

Al decirle a los tags html y body que su altura será del 100% nos permite que las capas que nosotros queramos opten también a tener esa altura. Es una tontería, pero cuando no se sabe este pequeño truco, puede dar muchos problemas el maquetar alguna cosa.

Hay que tener en cuenta también, que la capa o capas anterior a la que le queremos dar ese height: 100%, deben de tener un alto especificado. Es decir, si la capa anterior le damos 200px de alto, el height: 100% será de esos 200px de la capa contenedora, o si a la capa anterior le damos también 100% de alto igual que a la capa que se lo queremos dar, nos ocupará toda la pantalla. Solo teniendo en cuenta esto, podremos hacer capas al 100% en cualquier instancia.

Autor: Javier Ocampos

Co-fundador de Nube Online, director operativo y desarrollador web por vocación. Mi premisa es la honradez e innovación en cada uno de mis trabajos.

Página web

Nube Online