Question

我正在使用面板组制作手风琴，如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>

Answer 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>

具有固定位置的Bootstrap面板组手风琴

1 个答案: