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

Question

我无法将父class="site-section" （ class="site-section" ）的min-height: 100%设置为div （ class="item" ）的height （％） 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;}

这是演示 。

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

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

附注：在这个问题中，我的演示基于Bart的演示。

Answer 1

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

但是我只是用您的小提琴演奏了一点，并且不知道是否要增加position: absolute您的课程项目CSS的position: absolute是您所需要的？ 因此，您的CSS看起来像这样：

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

这是修改后的演示以显示示例。

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

Answer 2

.item{
        position:absolute;
        height:40%;
        background:#33cc33;
    }
.items {
        position:relative;
        height:100%;
        background:inherit;}

的HTML

<div class="item">
      <div class='items'>
                    ITEM Try
      </div>
</div>

尝试:)