jquery – 如何在不给出固定高度的情况下使这些面板具有100％高度的流体

我试图让这些面板占据他们所在的容器的全长,而不提供固定的高度,最初我希望它们占据页面的所有高度,

小提琴 – 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调整来实现你所要求的,我希望这有助于..