Establecer <div> Altura en la parte inferior de la window del browser

Si bien parece que debería haber una forma de hacerlo, estoy empezando a sospechar que no es así.

Tengo un contenido <div> ubicado en algún lugar de mi página.

 +---------------------------+ | Header | +---------------------------+ | | | | Sidebar | Content | | | | | | | | | | +---------+-----------------+ 

Lo que me gustaría hacer es establecer el alto del contenido <div> modo que la parte inferior sea igual a la parte inferior de la window del browser.

Sé que puedo hacer esto con un posicionamiento absoluto. ¿Pero no hay forma de hacer esto dentro de un layout existente? Si la única forma es con JavaScript / jQuery, entonces me gustaría ver cómo se podría lograr.

Ulimately, mi objective aquí es hacer que este <div> desplazable usando overflow-x: auto . Pero debo tener una altura fija para que funcione.

Debe usar javascript aquí: cuando el dom está listo, configure el alto del contenido como la altura de la window, la altura del encabezado

 $('#content').height($(window).height() - $('#header').height()); 

Debido a la falta de información, al igual que la altura del encabezado fijo, o hay otros divs dynamics que podrían causar problemas, una solución que tal vez funcione.

 $(function () { "use strict"; var resizeDiv = function (object) { object.height($(window).height() - $('#header').height()); }; $(window).ready(function () { resizeDiv($('#content')); }); $(window).bind("resize", function () { resizeDiv($('#content')); }); }); 

Aquí hay una solución pura de CSS:

 html,body{ height:100%; } #content{ //assuming that 80px is the header's height height: -moz-calc(100% - 80px); height: -webkit-calc(100% - 80px); height: calc(100% - 80px); } 

http://jsbin.com/ihemus/3/

¿Esta bien?

 html,body{ height:100%; display:block; } #sidebar{ background-color:orange; width: 20%; float:left; height: 100% } #content{ background-color:gold; height: 100% } 

SOLUCIONADO usando la tabla: http://jsbin.com/ihemus/15/

 table{ height:100%; width:100%; } html,body{ height:100%; } 

testing en el contenido div para agregar una class o un estilo = "min-height: 100%", creo que funcionará.

usando JS, supongamos que el div de su contenido tiene el id = "contenido" y el encabezado el id = "encabezado", por lo que en jquery, puede hacerlo así:

 $("#content").css("height",$(window).height()-$("#header").height); 

Dale a tu encabezado y barra lateral un posicionamiento fijo. Entonces su contenido se desplazará automáticamente sin encabezado y barra lateral.
¿Puede ser una solución?