我正在编写一个带侧边栏的webapp。 webapp适合填充整个屏幕的div（绝对定位，100％高度/宽度）。侧边栏顶部有一个标题和徽标（固定高度），下面有一个包含项目列表的div。如果项目列表超出可见边栏，我想将其设置为overflow: auto。我尝试使用max-height: 100%作为侧边栏，但这似乎没有调用滚动条。如何让div填充侧边栏的剩余垂直空间，如果内容超出可见区域，则显示滚动条？
+--------------------------------------------------------------------------+
| #app_pane |
| +------------------+ |
| | #sidebar | |
| | +--------------+ | |
| | | #logo | | |
| | | | | |
| | | height: 50px | | |
| | | | | |
| | +--------------+ | |
| | +--------------+ | |
| | | #list | | |
| | | | | |
| | | | | |
| | | <----+-+-----------o fill remaining height |
| | | | | and display scrollbars if necessary |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | +--------------+ | |
| +------------------+ |
+--------------------------------------------------------------------------+
编辑：
好吧，看起来我可以使用calc()在CSS3中完成它，但我更喜欢旧版浏览器支持的解决方案。
答案 0 :(得分：2)
您可以使用灵活的框布局属性来实现此布局，但Firefox (since version 1)，Safari (since version 2 or 3) and Chrome (since version 1)目前仅支持这些布局。
如果您将#sidebar设置为display: -webkit-box，那么您可以使用-webkit-box-flex上的#list属性来占用另一个#sidebar未使用的空间{{ 1}}孩子们。如果您随后将overflow-y:scroll应用于#list，则会在其内容不适合其内容的情况下获得滚动条。
以下是有关灵活方框属性的一些信息：
我不知道Internet Explorer和Opera的任何等效属性，尽管IE 9支持calc()。
答案 1 :(得分：0)
要获得100％高度的侧边栏，您可能正在寻找Faux Column。这是非常常用的。这只是为了给出一个全高度列的外观。要解决滚动条问题，并将徽标保持在顶部，您可以这样做：http://jsfiddle.net/9uJDZ/24/