使面板高度与父div匹配

Question

我使用Bootstrap2.3创建了一个html文件。2 css。html将有四个不同高度的行，例如第一行为10%，第二行为20%，第三行为40%，第四行为40%。在第三行中，我在每个单元格中放置了一个框状面板，html正在呈现，但问题是面板的高度与父级不匹配。假设如果面板主体的内容超过，则面板将从父级中出来，如下所示

现在，如果面板主体的内容较少，则面板高度似乎与父级不匹配，如下图所示

我试图实现的是，无论主体内容是什么，面板都应该填充在父div内。当面板的主体内容超过父div的高度时，面板主体应该有一个垂直滚动条。

我的代码如下所示

JSFIDLE

HTML

<div id="content">
  <div class="row1">
    <div class="row-fluid">
      <div class="span6">content1</div>
      <div class="span6">content1</div>
    </div>
  </div>
  <div class="row2">
    <div class="row-fluid">
      <div class="span6">content2</div>
      <div class="span6">content2</div>
    </div>
  </div>
  <div class="row3">
    <div class="row-fluid">
      <div class="span4">
        <div class="panel">
          <div class="panel-header well" data-original-title="">
            <h5><i class="icon-th"></i> Grid 3</h5>
          </div>
          <div class="panel-content">
            fgdfg dad dsd dsadsad ds adsa d das ds dsa dsad sa d ad as dsad sa d sda dsa sa das dsa da asd sad
          </div>
        </div>
      </div>
      <div class="span4">
        <div class="panel">
          <div class="panel-header well" data-original-title="">
            <h5><i class="icon-th"></i> Grid 3</h5>
          </div>
          <div class="panel-content">
            fgdfg
          </div>
        </div>
      </div>
      <div class="span4">content3</div>
    </div>
  </div>
  <div class="row4">
    <div class="row-fluid">
      <div class="span3">content4</div>
      <div class="span3">content4</div>
      <div class="span3">content4</div>
      <div class="span3">content4</div>
    </div>
  </div>
</div>

Answer 1

有两种方法可以解决这个问题。

使用JavaScript，您可以将子元素的高度设置为父元素的高度，或者设置为另一个子元素的高度，参见我的JSFiddle示例。你可以点击子元素2，它会取子元素1的高度，我添加了点击，这样你就可以看到它取其他元素的高度，它会将高度设置为与子元素1相同

在JavaScript中

var child1Height = $('.child-1').height();
$('.child-2').height(child1Height);

或者，您可以使用CSS，指定父元素的高度，并确保子元素的高度为100%，子元素2的高度为100%，这将把它的父div的高度设置为500px，请参阅我的JSFiddle例如。

在CSS中

.parent{
  width:400px;
  height: 500px;
}
.child-2{
  height:100%;
  overflow-y: auto;
}

Answer 2

在css中添加这个类。希望这将是工作。

  .panel-content {
    border: 1px solid red;
    padding: 2px;
    background: white;
    height: 40px;
    overflow-y: scroll;

 }

更新：Jsfiddle

Answer 3

试试flexbox。

CSS的调整：

.row3 {
    height: 40%;
    background: orange;
    display: flex;
}

.row3 > .row-fluid {
    display: flex;
}

.row-fluid > .span4 {
    display: flex;
}

.panel {
    display: flex;
    flex-direction: column;
}

.panel-header {
    /* padding-bottom: 10px; */
    /* min-height: 12px; */
}

.panel-content {
   overflow-y: auto;
}

演示

请注意，除IE 8外，所有主流浏览器都支持flexbox