Fixed footer, changing-height header, how to add scroll to the content between them?

Question

I need to compose a page which has a header and a footer, and some textual content in between.

The page size is fixed (an iframe) and has a fixed-height footer, but the header's content can change (it's translated thus the number of text lines varies). Both header and footer should never have a scrollbar. If the content between them is long, a scrollbar should be added to the content itself. Whatever I do, I can't get this to work CSS-only. I either have a scroll to the entire page (or the top area, including the header), or the content div's text extends beyond it's borders.

Here's a fiddle to exemplify my problem: http://goo.gl/u1iTz (I want a scroll for the green area only)

Oh, and without JavaScript... :)

Thanks.

Answer 1

If css3 is an option, you could use FLEXBOX

FIDDLE1 and FIDDLE2

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommandation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). -- from css-tricks

Markup:

<div class="container">
<header>The header text can change so the height can't be fixed. 
        Should never have a scrollbar
</header>
<div class="content">
Lorem ipsums in futurum.
</div>
<footer>
        The footer's height is fixed
</footer>
</div>

(Relevant) CSS:

.content
{
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
    height:0; /* triggers scroll */
    min-height: 0; /* triggers scroll */
}

A few points to mention:

1) I only apply flex-grow:1 (ie flex: 1 1 auto) to the scrollable content; the other items can have a fixed or dynamic height.

2) There's a hack(?) that I saw here, that placing height:0 on the container elements triggers a vertical scroll bar. (Here I used both height and min-height because this hack only worked in firefox with min-height)

3) For this to work in Firefox < 22 - you need to enable the flexbox runtime flag like this

4) Support for flexbox is surprisingly good in modern browsers (see here) but you need to add some browser specific css to get this working (see the above fiddle)