Bootstrap面板高度问题100％超过尺寸

Question

请你看一下This Demo，让我知道为什么小组会从底部扩展它的父高度？

<!--Beginning of Chart 1 -->
<div id="chartBox1" class="max col-lg-8 col-md-8 col-sm-24 col-xs-24">
    <!-- Beginning of Panel For Chart 1 -->
        <div class="panel panel-default max">
          <div class="panel-heading">Panel heading without title</div>
          <div class="panel-body max">

          </div>
        </div>
    <!--/ End of Panel For Chart 1 -->
</div>
<!--/ End of Chart 1 -->

.css样式是：

body, html{height:100%;}
.row{padding:0px; margin:0px;}
.max{height:100%;}
#rightBox{background-color:#E3E3E3;}
#topCharts{height:50%;}
#botCharts{height:50%;}
#chartBox1{background-color:red; padding:10px;}
#chartBox2{background-color:green; padding:10px;}
#chartBox3{background-color:blue; padding:10px;}

Answer 1

让我们说父母的身高是500px。由于.panel-body设置为父级100%的高度，因此其高度也将为500px。将其添加到.panel-heading的高度，面板将始终延伸到父项之外，因为不考虑标题的高度。

有几种解决方案：

• 使用calc()替换标题的高度。

  在这种情况下，.panel-heading元素的高度为〜40px。

  .panel-body {
      height: calc(100% - 40px);
  }
  

• 绝对将标题元素放在父元素的顶部，并使用填充取代它。

  .panel {
      position:relative;
  }
  .panel > .panel-heading {
      position: absolute;
      width: 100%;
      top: 0;
  }
  .panel > .panel-body {
      padding-top:40px;
  }