Set div to remaining height using CSS with unknown height divs above and below

Question

Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?

<         


        

Answer 1

2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.

---

2012: The correct way to do this with CSS alone is to use display: table and display: table-row. These are supported by all major browsers, starting with IE8. This is not using tables for display. You'll use divs:

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;  /* just to make sure nothing bleeds */
}
.header {
    display: table-row;
    background: gray;
}
.content {
    display: table-row;  /* height is dynamic, and will expand... */
    height: 100%;        /* ...as content is added (won't scroll) */
    background: turquoise;
}
.footer {
    display: table-row;
    background: lightgray;
}

    

        
Header
        
Header of variable height
    
    

        
Content that expands in height dynamically to adjust for new content
        Content height will initially be the remaining
        height in its container (.wrapper).
        
    
    

        
Sticky footer
        
Footer of variable height
    

That's it. The divs are wrapped as you'd expect.