jquery - 如何在不给出固定高度的情况下使这些面板具有 100% 的高度

Question

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

fiddle - 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;

Answer 1

我建议在 css 中使用 % 来设置从根元素到所有子元素的宽度和高度，同时处理流体布局，无论如何这里是一个小的 jQuery 调整来实现你所要求的，我希望这有助于..:)

$(document).ready(function() {


  var $offHeight = 0

  function updateHeight() {
    var $tempHeight = 0;
    var $wrapper = $('.mainContainer');
    $tempHeight += $('.row').not('.mainRow').outerHeight();
    $tempHeight += $('#panel1').find('.panel-heading').outerHeight();
    $tempHeight += $('#panel2').find('.panel-heading').outerHeight() + 5 + 4; // +5 for margin-top of panel 2 header and +4 for adjustment 
    $offHeight = $wrapper.height() - $tempHeight;
    $('#collapseOne').css({

      'max-height': $offHeight
    });
    $('#collapseTwo').css({

      'max-height': $offHeight
    });



  }

  updateHeight();


  $('.panel-heading').on('click', function() {

    updateHeight();



  });

  $(window).resize(function() {


    updateHeight();

  });


});

/*make parent of "container" fixed width and height*/

body,
html {
  width: 100%;
  height: 100%
}
/*fill "container" to its parent width and height*/

.mainContainer {
  width: 100%;
  height: 100%
}
/*extra margin-bottom fix*/

#accordion {
  margin: 0
}
.panel-heading a:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: right;
}
.panel-heading a.collapsed:after {
  content: "\e080";
}
#collapseOne,
#collapseTwo {
  overflow-y: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container mainContainer">
  <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 mainRow">
    <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>

https://jsfiddle.net/ajrycq33/1/