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 various headers/footers. The catch is here that the headers and footers can't scroll and the container/headers/footers can take any height depending on their content.

I've only been able to get this working with a statically sized header/footer. In the code I've added the problem I've come across: the text in the header/footer may wrap, which will bring it to two lines. So the header should grow to allow this extra line and the content should shrink to give space to the header. Is there any way to do this without using javascript? I will know the number of headers/footers ahead of time if that helps.

This is going to be a component in a page possibly with one or more per page, for example in a 2x2 setup where each takes up a 4th of the browser window. The functionality is mainly needed as the width of the browser might change causing the header content to break a new line. This could be done pretty easily with javascript but I've always heard that resize event handlers are evil.

For example if my wrapper is 600px high, I may have 2 headers and 1 footer. Lets say the first header's content causes it to break to a new line, but the second header's doesn't. So the first headers height is 20px where the second's is 10px. And lets say the footer's content also causes a line break and thus has 20px height. This gives us 50px worth of headers and footers so now the height of the scroller should be 550px.

Ascii Art:

 ____________________________________________
|         HEADER 1                           |
|________breaks to new line__________________|
|____________________________HEADER2_________|
|                                         | ||
|                                         | ||
|    This is my scroller                  | ||
|                                         | ||
|                                         | ||
|                                         | ||
|_________________________________________|_||
|     Some                                   |
|_____Footer_________________________________|

HTML:

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    ...
    </div>    
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

CSS:

body{
    height:100%;
}
.wrapper{
    height:400px;
    border-left:1px solid red;
}
.header, .footer{
    background-color: #EEE;
    height:27px;
}
.scroller{
    height:calc(100% - 54px);
    background-color: #CCC;
    overflow:auto;
}

the red border is to show how far the wrapper goes down, so the footer doesn't show up below. I did this instead of overflow: hidden simply for debugging.

http://jsfiddle.net/yKTdz/4/

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

<div class="wrapper">
    <div class="tr stretch">
        <div class="td">a header</div>
    </div>
    <div class="tr">
        <div class="td">
            <div class="contentWrapper">
                <div class="content">
                    content 0
                    ...............
                    ...............
                    ...............
                    content 29
                </div>
            </div>
        </div>
    </div>
    <div class="tr stretch">
        <div class="td stretch">a footer</div>
    </div>
</div>

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.

Answer 2

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.

Answer 3

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/

Answer 4

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:

<div class="wrapper">
    <div class="header">
        Some<br/>
        Header
    </div>
    <div class="scroller">
    Content<br />
    Content<br />
    Content<br />
    Content<br />
    ...
    </div>    
    <div class="footer">
        Some<br/>
        Footer
    </div>
</div>

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/

Answer 5

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()); 
});

Answer 6

As stated by Matt Cooper, I don't think there's a css pure solution. Here's my attempt: jsfiddle

var CalcHeight = function() {
    this.init = function() {
        var totHeight = $('body').height();
        var componentsHeight = $('.headers').height() + $('.footers').height();
        var diff = totHeight - componentsHeight;
        $('.hider').css({
            height: diff
        });
    }

    this.init();
}

var calcHeight = new CalcHeight;