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

Achieved with pure CSS (not even CSS3), by mixing table display with relative and absolute positioning.

Running Demo: http://jsfiddle.net/x4vhW/

HTML

    

        
a header
    
    

        

            

                

                    content 0
                    ...............
                    ...............
                    ...............
                    content 29
                
            
        
    
    

        
a footer
    

CSS ^{Dark Magic(tm)}

.wrapper {
    height  : 200px;
    width   : 200px;
    display : table;
}

.tr { display : table-row; }

.td { display : table-cell; }

.stretch { height : 1%; }

.contentWrapper {
    position   : relative;
    overflow-y : scroll;
    height     : 100%;
}

.content {
    position : absolute;
    right    : 0; 
    left     : 0;
}

Note: the stretch class is used in order to prevent headers and footers to grow if content has a small content; with stretch, they will auto-fit.

And finally, according to CanIUse, it is supported by almost all browsers, including IE8.