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

height:100%继承了没有身高的父母的40％。因此，您可以将html提供给body和overflow-y: auto;，然后在.parent-portlet上设置height:auto;

Plunker

如果您没有为其指定高度，则默认情况下该元素具有height，它不会从其父级继承height: 100%;。另外，根据w3c：

高度：百分比值

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

评论后编辑：

您已将overflow-y: auto;和.child-fluid提供给.box-header

Plunker

OP欲望情况：

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

Plunker

父div高度不适用于子div

1 个答案: