2

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.

Willi Ballenthin
  • 6,444
  • 6
  • 38
  • 52
  • This requires a little help from JavaScript. `max-height: 100%` won't do the trick esp. on legacy browsers. How far back do you need to go in terms of the browser support? – moey Jan 09 '12 at 04:40
  • I'm targetting a limited, but technical, audience. So I expect browsers from within the past two years, and preferable will not require cutting-edge. – Willi Ballenthin Jan 09 '12 at 04:56
  • 1
    So you want something like this? http://jsfiddle.net/9uJDZ/1 – mrtsherman Jan 09 '12 at 05:19
  • @mrtsherman I would like only the list to have scrollbars, if necessary. The logo should always be visible. – Willi Ballenthin Jan 09 '12 at 06:14

2 Answers2

2

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).

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:

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

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • Thank you for this answer. I was not aware of the flexible box layout properties, and it seems like a reasonable approach. I'll give it a shot. – Willi Ballenthin Jan 10 '12 at 16:40
  • @WilliBallenthin you’re very welcome. Bit annoying that IE and Opera don’t have equivalents, but in theory the module seems really useful for layouts that CSS traditionally hasn’t been able to handle. – Paul D. Waite Jan 10 '12 at 17:11
0

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/

Michael Rader
  • 5,839
  • 8
  • 33
  • 43
  • In you fiddle you use an explicit height for the list. I would like the list to expand to all available space (somewhat like height: 100%), but not beyond the containing div. Can I do this using your approach? – Willi Ballenthin Jan 10 '12 at 16:38