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

This can now be done using CSS grids pretty easily. without the need of an filler elements even.

If you want multiple headers, simply put a few divs in there, or make the "header" div a flexbox if that's what you want.

HTML stays the same:

    

        Some

        Header
    
    

    Content

    Content

    Content

    Content

    ...
    
    
    

        Some

        Footer
    

CSS:

.wrapper{
    height:400px;
    border-left:1px solid red;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: [header] auto [content]1fr [footer]auto;
}
.header{
    background-color: #EEE;
    grid-row: header;
}
.footer{
    background-color: #EEE;
    grid-row: footer;
}
.scroller{
    background-color: #CCC;
    overflow:auto;
    grid-row: content
}

http://jsfiddle.net/yKTdz/15/