如何在不给出固定高度的情况下使这些面板具有 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

我想我明白你想要什么了。

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

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

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

Check My Example

Answer 2

希望这就是您的想法..

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

code

Answer 3

这看起来不错...

.panel { height: 300px; }

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

}

...要正确使用 % 高度，您需要为父项指定一个高度。

编辑：

然而，说父 .panel 的高度为 100% 也是有效的；但在堆栈中的某个点，除非你一直走到 html 高度为 100% 的标签，否则你将需要一个具有固定高度的元素，以便浏览器可以正确计算高度

编辑 2：

在聊天中与您进一步讨论后，很可能这就是您需要的...

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

Answer 4

如果您只从面板元素中删除属性 max-height，父元素将一直向下展开。

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

Fiddle: CLICK

Answer 5

除非您需要支持 Opera Mini，否则您应该能够使用 vh 并且可能 calc。你会想自己玩玩并调整数字，但我认为这样的事情应该有效（从当前目标更改为这些）：

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

编辑：为清楚起见，vh 指的是 'viewport height'，因此它特定于最终用户设备的视口，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

我建议在使用流体布局时使用 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/

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

How can I make these panels fluid with 100% height without giving fixed height

html

css

jquery

internet-explorer-8

twitter-bootstrap