Scroller with dynamically sized headers/footers

Question

What I\'m looking for is to have a container div with any number of headers and footers which would then have another scrolling div in between the

Answer 1

Building on DMoses answer, this solution involves just a bit more jquery, but it removes the issue of the scrollbar being slightly hidden by the footer/header

the jQuery:

$(document).ready(function(){
    $('.scroller').css("margin-top", $('.header').height());

    var height = $('.wrapper').height() - ($('.footer').height() + $('.header').height());

    $('.scroller').css("height", height);     
});

jsfiddle.net/XSADu/5/