html - 父 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%。所以你可以给html和body height:100% 然后设置overflow-y: auto; on .parent-portlet

Plunker

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

Height : Percentage Value

The percentage was always calculated with respect to the content box of the parent element.

评论后编辑:

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

Plunker

OP愿望情况:

I need to have a fixed .box-header on top of .box and scrolling .box-content.

Plunker