使面板高度与父 div 匹配答案

【问题标题】：make panel height match with parent div使面板高度与父 div 匹配
【发布时间】：2016-04-05 08:27:01
【问题描述】：

我使用 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>

【问题讨论】：

试过height:100% ?
@RayonDabre 是的...没有解决...
在将height:100% 设置为row-fluid 和.row-fluid .span3 类后确实有效
是this你想要什么？
@AlexMan: jsfiddle.net/q5hdL77v/10

标签： html twitter-bootstrap css flexbox

【解决方案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

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

【讨论】：

【解决方案2】：

在你的css中添加这个类。希望这会起作用。

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

 }

更新：Jsfiddle

【讨论】：

你能给我一个jsfiddle吗
不行这个不能应用...我需要维护#content { height: 100%; }

【解决方案3】：

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

使用JavaScript，您可以将子元素的高度设置为父元素的高度，或者设置为另一个子元素的高度，请参阅我的JSFiddle example.您可以单击child-2元素，它将采用高度在 child-1 中，我添加了单击，以便您可以看到它采用其他元素的高度，它将高度设置为与 child-1 相同

在 JavaScript 中

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

您也可以使用 CSS，指定父元素的高度，并确保子元素的高度为 100%，child-2 元素的高度为 100%，这将采用其父 div 的高度设置为500px，看我的JSFiddle example.

在 CSS 中

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

【讨论】：