html - 使面板高度与父 div 匹配

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

---

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