How can I set automatic scrollbars for a DIV that fills the remaining vertical space?

Question

I'm writing a webapp that has a sidebar. The webapp fits in a div that fills the entire screen (absolutely positioned, 100% height/width). The sidebar has a title and logo at the top (fixed height), and a div below that containing a list of items. I'd like to set this list of items to overflow: auto if they overrun the visible sidebar. I've tried using max-height: 100% for the sidebar, but this doesn't seem invoke the scrollbars. How can I have the div fill the remaining vertical space of the sidebar, and display scrollbars if the content overruns the visible area?

+--------------------------------------------------------------------------+
| #app_pane                                                                |
| +------------------+                                                     |
| | #sidebar         |                                                     |
| | +--------------+ |                                                     |
| | | #logo        | |                                                     |
| | |              | |                                                     |
| | | height: 50px | |                                                     |
| | |              | |                                                     |
| | +--------------+ |                                                     |
| | +--------------+ |                                                     |
| | | #list        | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |         <----+-+-----------o  fill remaining height                  |
| | |              | |              and display scrollbars if necessary    |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | +--------------+ |                                                     |
| +------------------+                                                     |
+--------------------------------------------------------------------------+

edit: Well it looks like I can do it in CSS3 with calc(), but I'd prefer a solution that legacy browsers support.

Answer 1

You can achieve this layout using the flexible box layout properties, but these are only currently supported in Firefox (since version 1), Safari (since version 2 or 3) and Chrome (since version 1).

• http://jsfiddle.net/gTAKL/

If you set #sidebar to display: -webkit-box, then you can use the -webkit-box-flex property on #list to make it take up all the space not used by the other #sidebar children. If you then apply overflow-y:scroll to #list, it’ll get a scroll bar if its contents don’t fit inside it.

Here’s some info on the flexible box properties:

• http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/
• http://www.w3.org/Style/CSS/specs#flexbox

I don’t know of any equivalent properties for Internet Explorer and Opera, although IE 9 does support calc().

Answer 2

To get a sidebar that is 100% height you're probably looking for a Faux Column. This is very commonly used. This is just to give the appearance of a full height column. To solve your scroll-bar problem, and still keep your logo at the top, you can do it like this: http://jsfiddle.net/9uJDZ/24/