【问题标题】: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...您稍后会遇到分辨率问题。

    【讨论】: