parentdiv身高未申请childdiv

Question

我创建了一个 html 东西，其中有一个名为 parent-portlet 的 parent div。 parent-portlet class 将 height 设置为 40%。 html 重新渲染正确，但问题是 child div (child-fluid) 高度没有应用到 parent 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 : 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

parentdiv身高未申请childdiv

parent div height is not applying for child div

html

css

height

styles