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

【问题标题】：How can I set automatic scrollbars for a DIV that fills the remaining vertical space?如何为填充剩余垂直空间的 DIV 设置自动滚动条？
【发布时间】：2012-01-10 03:49:49
【问题描述】：

我正在编写一个带有侧边栏的 web 应用程序。 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    |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | |              | |                                                     |
| | +--------------+ |                                                     |
| +------------------+                                                     |
+--------------------------------------------------------------------------+

编辑：好吧，看起来我可以在 CSS3 中使用 calc() 完成此操作，但我更喜欢旧版浏览器支持的解决方案。

【问题讨论】：

这需要一点 JavaScript 的帮助。 max-height: 100% 不会成功，尤其是。在旧版浏览器上。就浏览器支持而言，您需要往前走多远？
我的目标是有限但技术性的受众。所以我预计浏览器会在过去两年内出现，并且不需要尖端的浏览器。
所以你想要这样的东西吗？ jsfiddle.net/9uJDZ/1
@mrtsherman 如有必要，我只希望列表具有滚动条。徽标应始终可见。

标签： html css

【解决方案1】：

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

http://jsfiddle.net/gTAKL/

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

这里有一些关于弹性盒子属性的信息：

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

【讨论】：

感谢您的回答。我不知道灵活的盒子布局属性，这似乎是一种合理的方法。我试试看。
@WilliBallenthin 不客气。有点烦人的是 IE 和 Opera 没有等价物，但理论上该模块似乎对 CSS 传统上无法处理的布局非常有用。

【解决方案2】：

要获得 100% 高度的侧边栏，您可能正在寻找 Faux Column。这是非常常用的。这只是为了给出一个全高柱的外观。要解决您的滚动条问题，并且仍然将您的徽标保持在顶部，您可以这样做：http://jsfiddle.net/9uJDZ/24/

【讨论】：

在小提琴中，您使用列表的显式高度。我希望列表扩展到所有可用空间（有点像高度：100%），但不能超出包含的 div。我可以用你的方法做到这一点吗？