0

我不能将 a height(in %) 设置为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;}

这是演示。

DOCTYPE在我添加到我的 HTML之前，一切都运行良好。没有必要为 和 设置height（以 % 为单位），因此html拥有body他的. 现在，因为我需要设置,和. 结果是不再反应。.site-section.itemheight: 20%DOCTYPEheighthtmlbody.site-section.itemheight: 20%

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

PS 我的演示基于 Bart 在这个问题中的演示。

4

2 回答 2

0

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

但是我用你的小提琴演奏了一点点，不知道添加position: absolute到你的类项 CSS 是否是你想要的？所以你的 CSS 看起来像这样：

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

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

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

于 2013-10-11T17:50:01.983 回答
0 
.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>

尝试 ：）

于 2013-10-11T18:07:11.080 回答