css - Bootstrap 面板高度超出尺寸 100%

Question

在下面的代码中，我试图找出面板从底部扩展到其父级高度的原因。

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

假设 parent 的高度是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;
  }