Question

Is there a way to have two <div> containers, one having a static height, and a second underneath dynamic, basically just takes up the remaining portion of the viewport?

Inside the the dynamic container, if there is overflow within, the container itself would show scrollbars accordingly. That way the viewport should ever need a y-axis scrollbar.

Example

Any ideas? Would it require a lot of scripting or could it be done purely with css?

Answer 1

I would do it like this: http://jsfiddle.net/tw16/X5rWb/

CSS:

.content{
    border: 1px solid red;
    overflow-y: auto; /* now scrollbars will only appear when needed */
    overflow-x: hidden;
}

jQuery:

$(function () {
    adjustHeight();
});

$(window).resize(function () {
   adjustHeight();
});

function adjustHeight() {
    var windowHeight = $(window).height() - 2;
    var headerHeight = $('.header').outerHeight();

    $('.content').height(windowHeight - headerHeight);
}

The 2 in windowHeight comes from adding the 1px top and 1px bottom border of the .content div together.

Using outerHeight() for the .header means there is no need to make any additions as the top and bottom padding and borders are included. If you were to use outerHeight(true) this would also include the top and bottom margin.