固定位置的 Bootstrap 面板组手风琴答案

【问题标题】：Bootstrap panel-group accordion with fixed position固定位置的 Bootstrap 面板组手风琴
【发布时间】：2013-12-23 14:39:34
【问题描述】：

我正在使用面板组制作手风琴，如 http://getbootstrap.com/javascript/#collapse 的 Javascript 导航的“折叠”部分所示除了我希望手风琴在用户向下滚动时跟随屏幕，所以我将它全部包装在一个引导程序中并添加位置：固定到 div 的样式。不幸的是，一旦我滚动到底部并尝试展开手风琴，它就会从屏幕底部展开。但是，当手风琴位置不固定时，屏幕将增大以适应手风琴的新高度。有没有办法让我的蛋糕也能吃？

<div class="well" style="position: fixed"> <!--Causes this div to grow off the screen-->
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="panelOneLabel" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Title</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                <!--a bunch of content here-->
                </div>
            </div>
        </div>
        <!--a bunch of other similar panel panel-defaults-->
    </div>
</div>

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

我最终通过定义井的高度并在 css 中将 overflow-y 设置为 auto 来解决问题。现在，当它离开屏幕时，井会出现一个滚动条，让我无论如何都可以到达手风琴的任何部分。

我只是将我在遇到此问题时实现的代码删除给任何需要它的人。我当时采用的解决方案使用内联样式，可能不是最好的，或者不一定是你想要的特定情况，所以我鼓励任何看到这个的人考虑他们自己选择是否使用内联样式，以及如何定义自己的css规则来解决问题。

<div data-spy="affix" style="width: inherit; height: 100%; max-height: 80%; overflow-y: auto" class="well">...somewhere in here is my accordion...</div>

【讨论】：