Cómo hacer un div al 100% de la altura de la ventana del navegador
Tengo un diseño con dos columnas: izquierda divy derecha div.
La derecha divtiene un color gris background-colory necesito que se expanda verticalmente dependiendo de la altura de la ventana del navegador del usuario. En este momento, background-colortermina en el último contenido de ese div.
Lo he probado height:100%, min-height:100%;etc.
Hay un par de unidades de medida CSS 3 llamadas:
Longitudes porcentuales de ventana gráfica (o relativas a la ventana gráfica)
¿Qué son las longitudes porcentuales de la ventana gráfica?
De la Recomendación candidata W3 vinculada arriba:
Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o el ancho del bloque contenedor inicial, se escalan en consecuencia.
Estas unidades son vh(alto de la ventana gráfica), vw(ancho de la ventana gráfica), vmin(largo mínimo de la ventana gráfica) y vmax(largo máximo de la ventana gráfica).
¿Cómo se puede usar esto para hacer que un divisor ocupe la altura del navegador?
Para esta pregunta, podemos utilizar vh: 1vhes igual al 1% de la altura de la ventana gráfica. Es decir, 100vhes igual a la altura de la ventana del navegador, independientemente de dónde esté situado el elemento en el árbol DOM:
HTML
<div></div>
CSS
div {
height: 100vh;
}
Esto es literalmente todo lo que se necesita. Aquí hay un ejemplo de JSFiddle en uso.
¿Qué navegadores soportan estas nuevas unidades?
Actualmente, esto es compatible con todos los principales navegadores actualizados, excepto Opera Mini. Consulte ¿Puedo usar...? para obtener más ayuda.
¿Cómo se puede utilizar esto con varias columnas?
En el caso de la pregunta que nos ocupa, que presenta un divisor izquierdo y otro derecho, aquí hay un ejemplo de JSFiddle que muestra un diseño de dos columnas que involucra tanto vhy vw.
¿ En qué se 100vhdiferencia de 100%?
Tome este diseño, por ejemplo:
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>
La petiqueta aquí está configurada al 100% de altura, pero debido a que su contenido divtiene 200 píxeles de altura, el 100% de 200 píxeles se convierte en 200 píxeles, no el 100% de la bodyaltura. Usarlo 100vhen su lugar significa que la petiqueta tendrá el 100% de la altura bodyindependientemente de la divaltura. ¡Eche un vistazo al JSFiddle adjunto para ver fácilmente la diferencia!
Si desea establecer la altura de un <div>elemento o cualquier elemento, también debe establecer la altura de <body>y <html>al 100%. Luego puedes establecer la altura del elemento con 100% :)
Aquí hay un ejemplo:
body, html {
height: 100%;
}
#right {
height: 100%;
}
Si eres capaz de posicionar absolutamente tus elementos,
position: absolute;
top: 0;
bottom: 0;
Lo haría.
