html - 将父项的最小高度为100％的div的高度设置为20％

我无法将其父（height）具有div的class="item"（class="site-section"）设置为min-height: 100%（％）。

这是我的HTML：

<div class="spacer"></div>

<header class="site-header"></header>

<div class="spacer"></div>
<div class="spacer"></div>

<section class="site-section">
    <div class="column">
        <div>I would like to be able to set an later
             change the height of this green item.
        <div class="item">ITEM</div>
    </div>
</section>

<div class="spacer"></div>
<div class="spacer"></div>

<footer class="site-footer"></footer>

<div class="spacer"></div>

这是我的CSS：

html, body {
    height:100%;
    margin 0;
    color:blue;
 }
.spacer {
    height:1%;
 }
.site-header {
    height:8%;
    background-color:yellow;
 }
.site-section {
    min-height:78%;
    background-color:#ffcccc;
    color:#aaa;
 }
.site-footer {
    height:8%;
    background-color:yellow;
 }
.column {
    width: 50%;
 }
.item {
    height: 40%;
    background-color: #33cc33;}

这是DEMO。

一切正常，直到我将DOCTYPE添加到HTML中。无需为height，html和body设置.site-section（以％为单位），因此.item具有他的height: 20%。现在，由于DOCTYPE，我需要为height，html和body设置.site-section。结果是.item不再对height: 20%作出反应。

任何想法如何解决这个问题？

附言在此question中，我基于Bart的演示进行了演示。

最佳答案

@CBroe是正确的，因为除非父母本身具有身高（例如身高：35像素），否则您无法真正获得身高百分比。我建议您设置div的高度，然后将您的内部div设置为百分比。

但是我只是用您的小提琴演奏了一下，不知道将position: absolute添加到您的类项目CSS是否符合您的需求？因此，您的CSS如下所示：

.item {
    position: absolute;
    height: 40%;
    background-color: #33cc33;
}

这是the demo modified来显示示例。

注意：即使高度是灵活的，但如果将高度设置为100％，它将超过其余div。

关于html - 将父项的最小高度为100％的div的高度设置为20％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19323888/