responsive height for scrollable content

Question

I'm working on a responsive design. I have three main divs. header div content div and fotter div. Header and footer have height: 50px.

THe content (middle) div has a scrollbar. I need the scrollable content to always occupy the entire height of the browser window but with a constant margin or padding that would prevent from overlapping with fotter.

I currently have height:70% on content div but scrollable content overlaps with fotter on smaller screens and gives me a huge gap between scrollable content and fotter on bigger screens.

Is there a way to acomplish this without media queries?

Any help will be greatly appreciated.

Thanks

Answer 1

Set the main column to 100% height with a margin-bottom the minus value of the footer height.

html,body {
    margin:0;
    padding:0;
    height:100%;
}

.body {
    height: 100%;
    margin-bottom: -30px;
    background: #000;
    color: #fff;
}

.footer {
    height: 30px;
    background: #ececec;
}

Example: http://jsfiddle.net/Lkj5P/