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

I took Matt Cooper's solution and updated it a bit. This resolves the inability to add more than one widget to a page, and also the footer sizing issue.

http://jsfiddle.net/XSADu/10/

Steps:

1. Make the wrapper relative so that absolute children can be position
2. Make header,footer,scroller absolute. Position the footer at the bottom
3. Add javascript to size the scroller top/bottom.

CSS

.wrapper{
    height:400px;
    border-left:1px solid red;
    position: relative;
}

.header, .footer, .scroller {
    background-color: #EEE;
    position:absolute;
    width: 100%;
}
.footer {
    bottom: 0;
}

.scroller{
    background-color: #CCC;
    overflow:auto;
}

JS

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

NOTE: If the header/footer sizing are dynamic, you may want to give them some max heights as a percentage of the wrapper, so that the content isn't hidden.