Question

我使用bootstrap 2.3.2 css创建了一个html的东西。 html将有四行具有不同的高度，例如第一行它将是10％，第二行--20％，第三行 - 40％和第四行 - 40％是重复的。在第三行中，我在每个单元格中放置了一个类似于面板的框，html正在渲染，但问题是面板的高度与父级不匹配。让我们说如果面板主体的内容超过那么面板从父母那里出来，如下所示

现在如果面板主体的内容较小，那么面板高度似乎与父母不匹配，如下所示

我想要实现的是，无论身体内容是什么，小组都应填写在父div中。当面板的主体内容超过父div的高度时，面板主体应该有一个垂直滚动条。

我的代码如下所示

JSFiddle

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

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

DEMO

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

Answer 2

在你的css中添加这个类。希望这可行。

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

 }

更新：Jsfiddle

Answer 3

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

使用JavaScript，您可以将children元素的高度设置为父元素的高度，或者设置为另一个子元素的高度，请参阅我的JSFiddle example.您可以单击child-2元素，它将需要child-1的高度，我添加了单击，这样你就可以看到它取其他元素的高度，它会将高度设置为与child-1相同

在JavaScript中

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

或者你可以使用CSS，指定父级的高度，并确保子元素的高度为100％，子元素2的高度为100％，这将取其父级div的高度设置为500px，请参阅我的JSFiddle example.

在CSS中

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

使面板高度与父div匹配

3 个答案: