Question

我无法将height（以％为单位）设置为其父div）有class="item"的{{1}}（class="site-section"）。< / p>

这是我的HTML：

min-height: 100%

这是我的CSS：

<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>

这是DEMO。

在我将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;}添加到HTML之前，一切正常。无需为DOCTYPE，height和html设置body（以％为单位），因此.site-section拥有.item。现在，由于height: 20%，我需要为DOCTYPE，height和html设置body。结果是.site-section不再对.item作出反应。

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

P.S。我在这个question中将我的演示基于Bart的演示。

Answer 1

@CBroe是正确的，除非父亲本身有一个高度（例如身高：35px），否则你无法获得身高百分比。我建议设置div的高度，然后你的内部div可以设置为百分比。

但是我用你的小提琴演奏了一点点，并且不知道是否将position: absolute添加到你的课程项目中CSS是你正在寻找什么？所以你的CSS看起来像这样：

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

以下是显示示例的the demo modified。

注意：即使高度很灵活，如果你将高度设置为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>

尝试：）

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

2 个答案: