如何为填充剩余垂直空间的DIV设置自动滚动条？ [英] How can I set automatic scrollbars for a DIV that fills the remaining vertical space?
问题描述
我在写一个有侧边栏的webapp。 webapp适合在一个div，填充整个屏幕（绝对定位，100％的高度/宽度）。边栏在顶部（固定高度）有一个标题和标志，并在下面有一个包含项目列表的div。我想将这个项目列表设置为 overflow：auto 如果他们超出了可见的边栏。我试过使用 max-height：100％作为侧边栏，但是这似乎不调用滚动条。如何使div填充侧边栏的剩余垂直空间，如果内容超过可见区域，则显示滚动条？
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 |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | +--------------+ | |
| +------------------+ |
+--------------------------------------------------------------------------+
编辑：
好吧，它看起来像我可以在CSS3中使用 calc（） ，但我更喜欢旧版浏览器支持的解决方案。
edit:
Well it looks like I can do it in CSS3 with calc(), but I'd prefer a solution that legacy browsers support.
推荐答案
您可以使用弹性框布局属性来实现此布局，但是这些布局目前仅支持 Firefox（自第1版起）， Safari（从版本2或3开始）和Chrome（从版本1开始）。
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).
- http://jsfiddle.net/gTAKL/
如果将 #sidebar 设置为 display：-webkit-box ，则可以使用 -webkit-box-flex 属性以使其占用其他未使用的所有空间 #sidebar 儿童。如果你然后应用 overflow-y：scroll 到 #list ，它会得到一个滚动条
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:
- http：//www.the-haystack。 com / 2010/01/23 / css3-flexbox-part-1 /
- http://www.w3.org/Style/CSS/specs#flexbox
- 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（）。
I don’t know of any equivalent properties for Internet Explorer and Opera, although IE 9 does support calc().
这篇关于如何为填充剩余垂直空间的DIV设置自动滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
