Question

我需要在一行（.row）内有三个Bootsrap面板（.panel），所有相同的高度，无论每个面板中有多少内容。我可以使用jquery.matchHeight.js库（https://github.com/liabru/jquery-match-height）设置每个.panel的外部高度。但是，我无法使内部高度相同（.panel-body divs的高度）。我尝试将.panel和.panel-body的高度设置为100％，但这会导致.panel-body div的背景颜色超出包含.row的高度。

请查看我创建的jsfiddle以查看问题：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>

请注意：我需要这个才能做出回应。当屏幕尺寸足够宽时，我只希望.panels是垂直的。

另外，我知道已发布的许多问题非常相似;但是，之前的帖子都没有解决内部高度的问题（.panel-body divs的高度）。

提前谢谢！

Answer 1

问题是matchHeight在浏览器解释CSS之后运行，因此panel {height: 100%}毫无意义。

您也应该在matchHeight()上运行panel-body ..

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

https://jsfiddle.net/rtq64o8d/

Answer 2

尝试使用粉红色背景div作为所有三个面板的包装，而不是单独的背景。然后做overflow:auto。此包装器必须具有定义的高度。将面板主体，面板和div设置为100％高度。

这是一个bootply：http://www.bootply.com/svJMjYtLso

自举面板 - 外部高度相同，面板高度相同

2 个答案: