Hay muchas maneras de hacer que la altura de sus elementos HTML que ser exactamente como la altura de la pantalla del navegador, independientemente de la resolución de pantalla, navegador, dispositivo, etc.
Muchas de estas opciones utilizan JavaScript para averiguar la altura de la ventana. Pero hay una forma de hacerlo sólo con CSS puro.
¿Qué es el Viewport-Porcentaje (o ventana gráfica relativa) Longitudes?
Las longitudes de ventana gráfica en porcentajes son en relación con el tamaño del bloque inicial que contiene.
Cuando se cambia la altura o ancho del bloque de contención inicial, que se escalan en consecuencia. Así, mediante el uso de longitudes visor-porcentuales, elementos HTML se ajustan automáticamente cuando la altura o la anchura de la pantalla cambia.
Hay algunas opciones que pueden serle de utilidad:
- vh (altura ventana)
- vw (ancho ventana)
- vmin (viewport longitud mínima)
- vmax (viewport longitud máxima)
Ejemplo practico
En su uso de CSS:#your-object: height: 100vh;
Para los navegadores que no soportan vh-units, utilizar modernizr. Agregar este script (para agregar detección vh-units)
// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
var bool;
Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
var height = parseInt(window.innerHeight/2,10),
compStyle = parseInt((window.getComputedStyle ?
getComputedStyle(elem, null) :
elem.currentStyle)["height"],10);
bool= !!(compStyle == height);
});
return bool;
});
Por último, utilice esta función para agregar a la altura de la ventanilla a #your-object si el navegador no admite vh-units:
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height())+'px'});
}
});
Fuentes:
http://www.w3.org/TR/css3-values/#viewport-relative-lengths
http://www.iteramos.com/pregunta/1744/hacer-div-100-de-la-altura-de-la-ventana-del-navegador