我创建了一个 html 文件,它有一个名为 parent-portlet
的父 div。 parent-portlet
类将 height
设置为 40%。 html 重新渲染正确,但问题是子 div (child-fluid
) 高度未应用于父 div (parent-portlet
) 的高度。
谁能告诉我一些解决办法
我的代码如下
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;
}
最佳答案
.parent-portlet
继承了其没有高度的父级的 40%。所以你可以给html
和body
height:100%
然后设置overflow-y: auto;
on .parent-portlet
默认情况下,一个元素具有 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
OP愿望情况:
I need to have a fixed
.box-header
on top of.box
and scrolling.box-content
.
关于html - 父 div 高度不适用于子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34236794/