如何为 Bootstrap 手风琴设置最大高度答案

【问题标题】：How to set max height for Bootstrap accordion如何为 Bootstrap 手风琴设置最大高度
【发布时间】：2016-02-24 09:04:31
【问题描述】：

我使用 this 模板在 Bootstrap 中创建了一个手风琴。

在子链接 div 的内容变为可滚动之前，我可能会有更多的元素并且无法弄清楚如何设置菜单的最大高度，因为我的窗口有限。

JSFiddle

我已经尝试将最大高度应用于#menu 和.list-group.panel

【问题讨论】：

你能把这段代码的改编版本的 jsfiddle 放上来吗？
此外，除了 max-height 之外，您还需要在容器上放置 overflow-y: auto 以使其滚动（如果尚未应用）。
@Dontfeedthecode 我加了小提琴

标签： javascript html css twitter-bootstrap electron

【解决方案1】：

这是一个示例，说明如何使用您提供的代码进行滚动。

div.sublinks.collapse {
    max-height: 200px;
    overflow-y: scroll;
}

http://jsfiddle.net/bjpLL5xn/3/

您会遇到的问题是，当扩展 Javascript 会使动画“跳跃”时。

【讨论】：

有没有办法不让动画跳转，也可以在不需要的时候隐藏滚动条
@AnžeJenšterle change overflow-y: scroll to overflow-y: auto 首先，我得再看看跳跃问题。

【解决方案2】：

一个项目是 38 像素，因此您可以将 max-height 设置为 .sublinks div 来设置您想要显示的 div 的数量，因此如果您想要两个将其设为 76 像素，或者您想要 3 将其设为 114 像素，依此类推.我还添加了overflow: overlay;，这样您就不会看到手风琴位之外的项目，它仍然添加了一个滚动条。

Jsfiddle

【讨论】：

【解决方案3】：

.panel-group .panel+.panel {
margin-top: 3px !important;
max-height: 90% !important; //90% height of your parent div and if it crosses y-axis scroller will be shown 
overflow-y: auto !important;
}

始终使用 % 而不是 px...您稍后会遇到分辨率问题。

【讨论】：