Set <div> Height to Bottom of Browser Window

Question

While it seems there should be a way to do this, I'm starting to suspect there is not.

I have a content <div> located somewhere on my page.

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

What I would like to do is set the height of the content <div> such that the bottom is equal to the bottom of the browser window.

I know I can do this with absolute positioning. But is there no way to do this within an existing layout? If the only way is with JavaScript/jQuery, then I'd be interested to see how that might be accomplished.

Ulimately, my goal here is to make this <div> scrollable using overflow-x: auto. But I must have a fixed height in order for that to work.

Answer 1

You must use javascript here - when the dom is ready set the height of the content to be height of the window - height of the header

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

Answer 2

Because of lack informations, like is the height of header fixed, or are there other dynamic divs which could cause problems, one solution which maybe works.

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


    $(window).ready(function () {
        resizeDiv($('#content'));
    });

    $(window).bind("resize", function () {
        resizeDiv($('#content'));
    });

});

Answer 3

Here is a pure css solution:

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);
}