Static container height combined with a dynamically sized container, possible?

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 vie开发者_如何学Pythonwport?

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?

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.

http://jsfiddle.net/kKgQb/29/

.content{
    position:absolute;
    top: 212px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: auto;

    outline: 1px solid red;   
    overflow-y: scroll;
    overflow-x: hidden;
}

.header{
    height:200px;
    outline: 1px solid green;
}

if your header is static, you could set the height of the container via javascript

var windowHeight = $(window).height();

$('.content').height(windowHeight - $('.header').height())

This doesn't account for padding or margins, but it should give you an idea. You might also want to run this anytime the browser gets resized.

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

function doResize(){
    var windowHeight = $(window).height();

    $('.content').height(windowHeight - $('.header').height())
}