Question

Okay there are 2 scenarios:

I have a layout like this:

----------------
button header
----------------
Contents
Contents
Contents
Contents (with scrollbar)
Contents
------------
footer
------------

What I want to achieve is:
The buttonheader and footer must always stay in view – the content must be scrollable.
The buttonheader can be empty – thus the scrollable content should move above the
buttonheader – there is no point in losing space if there is no buttons.

So absolute/fixed positioning seems to not be an option so I tried with relative. (The reason absolute is no solution, is because if the contents are placed absolutely there, they will never move in case the buttonheader is empty.)

I set the height to percentage – but It will of course look very bad in case someone resizes the window.

Look here and resize the outputwindow:

sad attempt on how to get a working relative positioned scrollable content

The second version:

is to show what it should behave like (at the top part) – content should stick to top of the page – footer is wrong here

Answer 1

The flexible behavior sounded a lot like that of a table-row, so I went that way in CSS.
Added a few extra div’s to make firefox play nicely inside the main cell.

See http://jsfiddle.net/willemvb/XMEcC/

#container{
    position: relative;
    width: 300px;
    display: table;
    height: 100%;
}

#header, #footer{
    width: 100%;
    height: auto;
    display: table-row;
}

#main{
   height: 100%;
   display: table-row;    
}

#cell{
   display: table-cell;    
}

#wrapper{
    position: relative;
    width: 100%;
    height: 100%;   
}

#overflow{
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width:100%;
}

Edit: only tested in FF and Safari