Bueno pues a raíz de una consulta de una amiga diseñadora… surge esta otra perlita sobre CSS.
Alguna 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 esta forma:
html, body { height: 100%; }
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.
Por si no os ha quedado demasiado claro, o queréis ver un ejemplo del funcionamiento, podéis ver esta página de ejemplo que hemos preparado:
Esperamos que os sirva esta pequeña perla, como decimos nosotros, para vuestros diseños! 
Me gustan estos tips! xD
Saludos y buena suerte con el blog!
Ueee moltes gràcies
estoy probándolo a ver que tal. Estas cosas así de vista parecen muy sencillas, pero te puedes llegar a desquiciar si no lo sabes 
+1 al tip & trick!
Me alegro de que sirvan! Si tenéis alguna otra duda y os lo podemos solucionar, estamos abiertos a sugerencias. Podéis enviarnos vuestras dudas mediante el formulario de contacto.
Es lo que buscaba, se agradece el truco.
Este truco no funciona ni en Firefox, ni en Google Chrome, ni en Safari, solo funciona en Opera.
Ah! y en IE6 que yo haya comprobado..
Listillo, siento desilusionarte pero el truco si que funciona si lo aplicas como te contamos, teniendo en cuenta las capas contenedoras de esa que quieres hacer 100% alta.
Es un truquillo que aplico casi a diario en los diseños que hacemos en la empresa, y es soportado por cualquier navegador, ya que no es ninguna instrucción de CSS3 o parecida, sino simplemente la forma de ordenar las propiedades para que esa capa tome la forma que tiene que tomar.
Inténtalo y verás como si resulta.
Ese truco es famoso, funciona siempre y cuando la capa contenedora tenga establecida su altura en 100% tambien, si esa capa supera el alto de la pantalla para que siga funcionando hay que agregarle en sus estilos display:table.
Claro, pero es increible que no se puede poner al 100% del tamaño de la página, no de la pantalla, es decir al 100% del tamaño en píxeles del body o del html. Y por lo que he visto en CSS3 tampoco viene nada nuevo en eso aunque se agradece background-size.
Muy bueno el truco y claro que funciona, lo probé en Chrome, IExplore, Firefox; no me funcionaba al inicio me olvide de establecer el alto de la etiqueta FORM, porque como dicen se tiene que aplicar a todas las capas contenedoras.
Saludos y gracias.