CODEWITHSUNDEEP
jquerytwitter-bootstrapcsstwitter-bootstrap-3
bambi
bambi

Reputation: 384

Bootstrap panels - same outer height and same panel-body height

I need to have three Bootsrap panels (.panel) within a row (.row) all the same height, regardless of how much content is in each of them. I was able to set the outer height of each .panel using the jquery.matchHeight.js library (https://github.com/liabru/jquery-match-height). However, I've been unable to get the inner height the same (height of the .panel-body divs). I tried setting the height of .panel and .panel-body to 100% but this caused the background-color of the .panel-body divs to extend past the height of the containing .row.

Please take a look at the jsfiddle I created to see the problem in action: https://jsfiddle.net/vpdq2ugb/21/

<div class="row">

  <div class="col-md-3 site-component" style="background-color: pink;">

    <div class="panel panel-default">
      <div class="panel-heading" style="background-color: rgba(240,90,40,0.8);">Panel 1</div>
      <div class="panel-body" style="background-color: rgba(240,90,40,0.2);">
        sdf sjdf jsdj g egjjweg
      </div>
    </div>

  </div>

  <div class="col-md-3 site-component" style="background-color: pink;">

    <div class="panel panel-default">
      <div class="panel-heading" style="background-color: rgba(247,147,29,0.8);">Panel 2</div>
      <div class="panel-body" style="background-color: rgba(247,147,29,0.2);">
        sdf sjdf jsdj g egjjweg sjdgjsg ie wengieg jskdkg e gjwe jg wefmwegjw eg wjegjwegjwjg kd
        fdsljg e rgi re vmeb,enb eb ejrke gmer mgeirg s gneirg er gmwefi3 igr mgierg mw egiewrg
      </div>
    </div>

  </div>

  <div class="col-md-3 site-component" style="background-color: pink;">

    <div class="panel panel-default">
      <div class="panel-heading" style="background-color: rgba(55,208,0,0.8);">Panel 3</div>
      <div class="panel-body" style="background-color: rgba(55,208,0,0.2);">
        sdf sjdf jsdj g egjjweg sjdgjsg ie wengirgeg wrey yu yubrb  zdxc xev
      </div>
    </div>

  </div>

</div>

Please note: I need this to be responsive. I only want the .panels to be vertical when the screen size is wide enough.

Also, I know there are many questions already posted that are very similar; however, none of the previous posts address the problem of the inner height (height of the .panel-body divs).

Thank you in advance!

Upvotes: 1

Views: 647

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362610

The problem is that matchHeight runs after the CSS is interpreted by the browser so, panel {height: 100%} is meaningless.

You should run matchHeight() on the panel-body too..

$('.panel-body').matchHeight();

https://jsfiddle.net/rtq64o8d/

Upvotes: 2

Rachel S
Rachel S

Reputation: 3920

Try using the pink background div as a wrapper around all three panels, not separate backgrounds. Then do overflow:auto. This wrapper must have a defined height. Style the panel-body, panel and div with 100% height.

Here is a bootply: http://www.bootply.com/svJMjYtLso

Upvotes: 1

Related Questions