Проблема на высоте ботстрапа 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; 
  }