如何在沒有固定高度的情況下使這些面板具有100％高度的流體

Question

我試圖讓這些面板占據他們所在的容器的全長，而不提供固定的高度，最初我希望它們占據頁面的所有高度，

小提琴 - 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/

Answer 2

我想我明白你想要什么。

當您在折疊元素上設置高度時，Bootstrap JS會使用它的樣式動畫覆蓋它。

我找到的解決方案是設置max-height

.panel-collapse{
  max-height: 200px;
  overflow-y: auto;
}

檢查我的示例

Answer 3

我希望這是你的想法..

https://jsfiddle.net/0fgnu99o/6/

code

Answer 4

這看起來好看......

.panel { height: 300px; }

#collapseOne, #collapseTwo {
  height:90%;
  max-height:90%;
  overflow-y:auto;

}

...要正確使用％高度，您需要為父級指定高度。

編輯：

但是，如果父.panel的高度為100％，則也是有效的。 但是在堆棧中的某個點上，除非你一直到高度為100％的html標簽，你需要有一個固定高度的元素，這樣瀏覽器才能正確計算高度

編輯2：

在聊天中與您進一步討論時，很可能這就是您所需要的......

http://jqueryui.com/accordion/#fillspace

Answer 5

除非您需要支持Opera Mini，否則您應該能夠使用vh並且可能使用calc 。 你會想自己玩它並調整數字，但我認為這樣的事情應該有效（從當前目標改為這些）：

#panel1, #panel2 {
  max-height: calc(100vh - 150px);
  overflow-y:auto;
}

編輯：為了清楚起見， vh指的是“視口高度”，因此它特定於最終用戶設備的視口，而calc允許您讓瀏覽器處理一些簡單的數學運算。 如果您知道某些其他元素采用固定數量的像素，則可以從視口高度中減去它們並保持在視口內。

Answer 6

我不知道你是否正在尋找全高。 無論如何，這將刪除內容的滾動條。 請告訴我。

#collapseOne, #collapseTwo {
height: auto;
max-height: none;
overflow-y: auto;
}

Answer 7

看看Flexbox（ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ）

這有很多可能性來確保2個容器的高度相同

Answer 8

如果只從面板元素中刪除屬性max-height ，則父元素將一直向下擴展。

#collapseOne, #collapseTwo {
 overflow-y:auto;  
}

小提琴： 點擊