Cómo hacer que un div tenga una altura del 100% de la ventana del navegador

Hay un par de unidades de medida CSS 3 llamadas:

Longitudes de porcentaje de vista (o Relativas a la Vista)

¿Qué son las Longitudes de porcentaje de vista?

Según la Recomendación de Candidatos de la W3C enlazada arriba:

Las longitudes de porcentaje de vista son relativas al tamaño del bloque contenedor inicial. Cuando se cambia la altura o anchura del bloque contenedor inicial, se escalan en consecuencia.

Estas unidades son vh (altura de la vista), vw (anchura de la vista), vmin (longitud mínima de la vista) y vmax (longitud máxima de la vista).

¿Cómo se puede utilizar para hacer que un divisor llene la altura del navegador?

Para esta pregunta, podemos hacer uso de vh: 1vh es igual al 1% de la altura de la vista. Es decir, 100vh es igual a la altura de la ventana del navegador, independientemente de dónde se encuentre el elemento en el árbol DOM:

HTML

CSS

div {
    height: 100vh;
}

Esto es literalmente todo lo que se necesita. Aquí tienes un ejemplo de JSFiddle de esto en uso.

¿Qué navegadores admiten estas nuevas unidades?

Actualmente esto es compatible con todos los principales navegadores actualizados excepto Opera Mini. Consulta Can I use... para obtener más soporte.

¿Cómo se puede utilizar con varias columnas?

En el caso de la pregunta en cuestión, con un divisor izquierdo y derecho, aquí tienes un ejemplo de JSFiddle que muestra un diseño de dos columnas que involucra tanto vh como vw.

¿Cómo es 100vh diferente de 100%?

Tomemos este diseño como ejemplo:

        ¡Hola, mundo!

La etiqueta p aquí está configurada con una altura del 100%, pero debido a que su div contenedor tiene una altura de 200 píxeles, el 100% de 200 píxeles se convierte en 200 píxeles, no en el 100% de la altura del body. Usar 100vh en su lugar significa que la etiqueta p será del 100% de la altura del body independientemente de la altura del div. ¡Echa un vistazo a este JSFiddle acompañante para ver fácilmente la diferencia!

Si deseas establecer la altura de un

u otro elemento, debes establecer también la altura de y en 100%. Luego puedes establecer la altura del elemento en 100% :)

Aquí tienes un ejemplo:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Si puedes posicionar absolutamente tus elementos,

position: absolute;
top: 0;
bottom: 0;

lo lograría.

No mencionaste algunos detalles importantes como:

• ¿Es el diseño de ancho fijo?
• ¿Son de ancho fijo alguna o ambas columnas?

Aquí hay una posibilidad:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; /* Ancho opcional */
}

#left {
  background: yellow;
  float: left;
  width: 360px; /* Ancho opcional, pero recomendado */
}

#right {
  background: grey;
  margin-left: 360px; /* Debe estar de acuerdo con el ancho anterior */
}

  Ejemplo

      Izquierda

Existen muchas variaciones de esto dependiendo de cuáles columnas necesitan ser fijas y cuáles son líquidas. También puedes hacer esto con posicionamiento absoluto, pero generalmente he encontrado mejores resultados (especialmente en términos de compatibilidad con navegadores) usando floats en su lugar.

Aquí hay una solución para la altura.

En tu CSS usa:

#your-object: height: 100vh;

Para los navegadores que no admiten las unidades vh, utiliza modernizr.

Agrega este script (para agregar detección de las unidades vh)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar a 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;
});

Finalmente utiliza esta función para añadir la altura de la ventana gráfica a #your-object si el navegador no admite las unidades vh:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height()) + 'px'});
    }
});