Question

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

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调整来实现你所要求的，我希望这有帮助.. :)

＆＃13;

$(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();

  });


});

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

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

Answer 2

我想我理解你想要的东西。

当你在折叠元素上设置高度时，Bootstrap JS会用它的样式动画覆盖它。

我找到的解决方案是设置max-height

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

Check My Example

Answer 3

我希望这是你的想法..

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

code

Answer 4

看起来好像......

/home/deploy/.bashrc

...要正确使用％高度，您需要为父级指定高度。

编辑：

但是，父母.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;  
}

小提琴：CLICK

如何在没有固定高度的情况下使这些面板具有100％高度的流体

8 个答案: