我试图让这些面板占据他们所在的容器的全长,而不提供固定的高度,最初我希望它们占据页面的所有高度,
小提琴 – https://jsfiddle.net/0fgnu99o/10/
HTML
<div class="container">
<div class="row">
<div class="column">
<h3 style="display: inline-block;">{{vm.Title}}</h3>
<h4 class="pull-right" style="margin-top: 20px;">Back</h4>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading" data-toggle="collapse" data-target="#collapSEOne">
<h4 class="panel-title">Panel 1</h4>
</div>
<div id="collapSEOne" data-parent="#accordion" class="panel-collapse collapse in">
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 1<i class="pull-right">Delete</i></li>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseTwo">
<h4 class="panel-title">Panel 2</h4>
</div>
<div id="collapseTwo" data-parent="#accordion" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
<li class="list-group-item">Panel 2<i class="pull-right">Delete</i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.panel-heading a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
}
.panel-heading a.collapsed:after {
content: "\e080";
}
#collapSEOne,#collapseTwo {
height: 200px;
max-height: 200px;
overflow-y: auto;
}
我不想提供这个,
height: 200px; max-height: 200px;
解决方法
我建议在使用流体布局时使用％css中的根元素到所有子元素的宽度和高度,无论如何这里是一个小的jQuery调整来实现你所要求的,我希望这有助于..
