父div高度不适用于子div

Question

我创建了一个html内容，它有一个名为parent-portlet的父div。parent-portlet类的height设置为40%。html正在正确地更新，但问题是子div（child-fluid）的高度没有应用于父div（parent-portlet）的高度。

有人能告诉我这个的一些解决方案吗

我的代码如下所示

Plunker

Html

  <div class="parent-portlet">
    <div class="child-fluid">
      <div class="box">
        <div class="box-header well">
          <h2><i class="icon-bullhorn"></i> Alerts</h2>
        </div>
        <div class="portlet-content box-content alerts">
          <div class="alert alert-error">
            <strong>Oh snap!</strong> Change a few things up and try submitting again.
          </div>
          <div class="alert alert-success">
            <strong>Well done!</strong> You successfully read this important alert message.
          </div>
          <div class="alert alert-info">
            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
          </div>
          <div class="alert alert-block ">
            <h4 class="alert-heading">Warning!</h4>
            <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

css

.parent-portlet { 
  height: 40%;
}
.portlet-content {
  overflow-y: auto;
}
.child-fluid {
  height: inherit;
}

Answer 1

.parent-portlet继承了其父级的40%，而其父级没有高度。因此，您可以将height:100%赋予html和body，然后在.parent-portlet 上设置overflow-y: auto;

Plunker

默认情况下，元素具有height:auto;。如果不为其指定高度，则不会从其父元素继承height。此外，根据w3c:

高度：百分比值

百分比始终是根据内容框计算的父元素的。

评论后编辑：

您已将height: 100%;和overflow-y: auto;交给.child-fluid

Plunker

OP欲望情况：

我需要在.box上有一个固定的.box-header并滚动.box-content。

Plunker