CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Mona Coder
Mona Coder

Reputation: 6316

Bootstrap panel height 100% over size

In the below code, I am trying to find why the panel is expanding over its parent height from bottom.

<!--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 style is:

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

enter image description here

Upvotes: 2

Views: 1967

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241048

Let's say that the parent's height is 500px. Since the .panel-body is set to have a height of 100% of the parent, its height will also be 500px. Add this to the height of the .panel-heading and the panel will always extend outside of the parent because the height of the heading isn't taken into consideration.

There are a couple of solutions:

  • Use calc() to displace the height of the heading.

    In this case, the height of the .panel-heading elements is ~40px.

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

  • Absolutely position the heading element at the top of the parent and use padding to displace it.

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

Upvotes: 1

Related Questions