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

There's no way to do this with just Css, You'd need to use Javascript to check the height of the header and footer when the page loads and adjust things accordingly. Otherwise when you use position:fixed you'll get some overlap. See the Attached fiddle! http://jsfiddle.net/XSADu/

I use jQuery to adapt the padding-top on the scroller on document ready. like so

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