Html 如何为填充剩余垂直空间的DIV设置自动滚动条？

我正在写一个有侧边栏的网络应用程序。webapp适合填充整个屏幕的div（绝对定位，100%高/宽）。侧边栏顶部有一个标题和徽标（固定高度），下方有一个div，其中包含项目列表。如果项目超出了可见侧栏，我想将此列表设置为

溢出：auto

。我已经尝试在侧边栏中使用

max height:100%

，但这似乎无法调用滚动条。如何让div填充侧边栏的剩余垂直空间，并在内容超出可见区域时显示滚动条

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

+--------------------------------------------------------------------------+
|#应用程序窗格|
| +------------------+                                                     |
||#侧边栏||
| | +--------------+ |                                                     |
|| |#标志| ||
| | |              | |                                                     |
|| |高度：50px | ||
| | |              | |                                                     |
| | +--------------+ |                                                     |
| | +--------------+ |                                                     |
|| |#列表| ||
| | |              | |                                                     |
| | |              | |                                                     |
|| |要获得100%高度的边栏，您可能正在寻找一个。这是非常常用的。这只是为了给一个完整的高度柱的外观。要解决滚动条问题，同时仍将徽标保留在顶部，您可以这样做：
您可以使用灵活的框布局属性实现此布局，但目前仅在中支持这些属性




如果将
#sidebar
设置为
显示：-webkit-box
，则可以使用
#list
上的
-webkit-box flex
属性，使其占用其他
#sidebar
子项未使用的所有空间。如果您随后将
overflow-y:scroll
应用到
#list
，如果其中的内容不合适，它将得到一个滚动条

以下是有关柔性箱属性的一些信息：





我不知道Internet Explorer和Opera有任何等价的属性，尽管IE 9支持
calc（）
这需要JavaScript的帮助<代码>最大高度：100%

不会起作用，尤其是在传统浏览器上。在浏览器支持方面，你们需要走多远？我的目标是有限的，但技术性的观众。因此，我预计浏览器将在过去两年内推出，而且更可取的做法是不需要尖端技术。那么你想要这样的东西吗@Herman先生，如果有必要，我只希望列表中有滚动条。徽标应始终可见。在小提琴中，列表使用明确的高度。我希望列表扩展到所有可用空间（有点像高度：100%），但不能超出包含的分区。我可以使用您的方法进行此操作吗？谢谢您的回答。我不知道灵活的框布局属性，这似乎是一种合理的方法。我来试试看。@WilliBallenthin不客气。IE和Opera没有等价物，这有点令人恼火，但理论上，对于CSS传统上无法处理的布局，该模块似乎真的很有用。