html - 将其父元素的最小高度为 100% 的 div 的高度设置为 20%

Question

我无法设置 height (%)到 div ( class="item" ) 其 parent ( 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% 没有反应不再。

知道如何解决这个问题吗？

附言我的演示基于 Bart 在此 question 中的演示.

Answer 1

@CBroe 是正确的，因为除非 parent 本身有高度(例如高度:35px)，否则您无法真正获得高度百分比。我建议设置 div 的高度，然后你的内部 div 可以设置为百分比。

但我试了一下你的 fiddle ，不知道将 position: absolute 添加到你的类元素 CSS 中是否符合你的要求？所以你的 CSS 看起来像这样:

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

这里是 the demo modified显示示例。

注意:即使高度是灵活的，如果您将高度设置为 100%，它也会高于其余的 div。