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

Question

我正在编写一个带有侧边栏的网络应用程序。 webapp 适合填满整个屏幕的 div(绝对定位，100% 高度/宽度)。侧边栏顶部有一个标题和 Logo (固定高度)，下方有一个包含元素列表的 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 中做到这一点。 ，但我更喜欢旧版浏览器支持的解决方案。

Answer 1

您可以使用灵活的框布局属性实现此布局，但这些目前仅在 Firefox (since version 1) 中受支持。 , Safari (since version 2 or 3) and Chrome (since version 1) .

• http://jsfiddle.net/gTAKL/

如果你将#sidebar设置为display:-webkit-box，那么你可以使用-webkit-box-flex属性#list 使其占据所有未被其他 #sidebar 子级使用的空间。如果您随后将 overflow-y:scroll 应用于 #list，如果其中的内容放不下，它将获得一个滚动条。

这里有一些关于灵活框属性的信息:

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

我不知道 Internet Explorer 和 Opera 有任何等效的属性，尽管 IE 9 确实支持 calc()。