对于我的移动网站，我有一个触发按钮，点击该按钮会显示最初折叠的div。 div固定在屏幕顶部，占据整个屏幕高度。在该div中，有一个手风琴菜单列表。由于元素已修复，我无法向下滚动我的长菜单列表。当我将它设置为绝对时，它将它放在页面的错误区域（我猜相对于前一个div，而不是页面）。
这是一个演示。 http://www.bootply.com/a2ryNdYbAw
我想在手机上观看有助于查看滚动问题。
答案 0 :(得分：0)
如果您只想在将手风琴延伸到视野之外时滚动页面，可以将overflow: auto;添加到精炼ID
查看工作代码段。
*旁注：我还将overflow: hidden添加到#refine.collapsing，因此当手风琴打开时隐藏了右侧滚动条，因为它看起来更好。这与滚动问题无关，可以根据需要删除。
#refine.collapsing {
position: fixed;
left: 0;
right: 0;
background-color: #ffffff;
overflow: hidden;
}
#refine.collapse.in {
left: 0;
right: 0;
height: 100%;
background-color: #ffffff;
border: none;
}
#refine {
background-color: #ffffff;
padding: 0 0px 10px 0px;
border-bottom: 1px solid #f00;
border-top: 1px solid #ccc;
box-shadow: 0 4px 4px -2px #828181;
-moz-box-shadow: 0 4px 4px -2px #828181;
-webkit-box-shadow: 0 4px 4px -2px #828181;
top: 0;
position: fixed;
overflow: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim ipsum, interdum non pharetra malesuada, scelerisque et ligula. Proin semper imperdiet semper. Cras porta pulvinar magna. Maecenas malesuada dui sed quam egestas accumsan. In vel interdum
sapien, in pretium velit. Morbi tristique ligula eget nibh sollicitudin efficitur. Duis imperdiet, dui tincidunt semper facilisis, eros libero condimentum sem, ut venenatis elit tellus in ligula. Suspendisse venenatis aliquet velit, venenatis pharetra
ligula. Ut lorem metus, vulputate sed ipsum nec, consequat posuere orci. Nulla libero nisl, lobortis a nibh sit amet, sagittis venenatis lacus. Ut sollicitudin sapien eget facilisis commodo. Nunc pharetra felis id sapien aliquet iaculis. Ut a ante
mi. Donec hendrerit pretium sapien, in lacinia felis congue non. Sed in purus sit amet diam iaculis viverra. Mauris dapibus vulputate ultricies. Nunc nec mi condimentum, tincidunt ipsum nec, congue justo. Curabitur et eros ligula. Maecenas molestie
arcu vitae tempor molestie. Aliquam sit amet nibh sem.</div>
</div>
<div class="row">
<div class="col-xs-12">
<a role="button" class="btn btn-block btn-footer-a btn-default" data-toggle="collapse" href="#refine">Filter by</a>
<div class="collapse" id="refine">
<div class="col-xs-12 refine-header">
<div class="row">
<div class="col-xs-3 vcenter">text</div>
<div class="col-xs-7 vcenter text-right">text</div>
<div class="col-xs-2 vcenter">text</div>
</div>
</div>
<div class="col-xs-12">
<div class="panel-group" id="refine-accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<div class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn-block">
Size
</a>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<ul class="list-unstyled">
<li>
<input type="checkbox">Men's (23)</li>
<li>
<input type="checkbox">Ladies' (47)</li>
<li>
<input type="checkbox">Midsize (12)</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<div class="panel-title">
<a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Case material
</a>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<ul class="list-unstyled">
<li>
<input type="checkbox">Stainless Steel</li>
<li>
<input type="checkbox">Steel and Yellow Gold</li>
<li>
<input type="checkbox">Steel and Rose Gold</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<div class="panel-title">
<a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Band material
</a>
</div>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<ul class="list-unstyled">
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<div class="panel-title">
<a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Dial color
</a>
</div>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<ul class="list-unstyled">
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<div class="panel-title">
<a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Another
</a>
</div>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<ul class="list-unstyled">
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
<li>
<input type="checkbox">Blue (1)</li>
<li>
<input type="checkbox">Black (4)</li>
<li>
<input type="checkbox">Silver (23)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>