CSS的div高度设置为100%无效

Question

由于div4、div5和div6的存在，div2高度为1000像素。我不明白为什么div3没有获得100%的高度，它的高度为0像素。

<div id="div1" class="center" style="width:1024px; height:auto;">
    <div id="div2" style="float:left; width:100%; height:auto;">
        <div id="div3" style="float:left; width:460px; height:100%; background-image:url(img/bgVictorMonteiro.jpg); background-size:100% auto; background-position:bottom; background-repeat:no-repeat;"></div>
        <div id="div4" style="float:left; width:270px; height:1000px;"></div>
        <div id="div5" style="float:left; width:25px; height:1000px;"></div>
        <div id="div6" style="float:left; width:269px; height:1000px;"></div>
    </div>
</div>

- Diogo Almeida

---

因为父元素高度为自适应（auto），百分比只有在固定父元素高度时才能生效。 - Carlo Moretti

并不要忘记设置body，html {height:100％;} - Luís P. A.

如果您将所有div的高度设置为1000px，除了一个是100％，为什么不直接将div2的高度设置为1000px，并完全取消对子div设置的所有高度？ - Zac Braddy

@LuisP.A.，这里不适用！ - Diogo Almeida

@ZacBraddy，1000px的值只是为了测试目的。 - Diogo Almeida

Answer 1

使用基于百分比的 height 需要父元素上设置显式的 height 值：

指定百分比高度。百分比是相对于生成的盒子所在的包含块的高度计算的。如果未明确指定包含块的高度（即依赖于内容高度），并且此元素没有绝对定位，则该值计算为“自动”。根元素上的百分比高度与初始包含块相关。

内容高度：'height' 属性 (http://www.w3.org/TR/CSS21/visudet.html#the-height-property)

在本例中，父元素是具有 height: auto; 的 #div2。这意味着其 height 取决于其内容的高度，并且没有显式声明。

如果你在 #div2 上显式应用了 height（例如：height: 1000px;），那么在 #div3 上使用 height: 100%; 将起作用。

#div1 {
    width:1024px;
    height:auto;
}
#div2 {
    float:left;
    width:100%;
    height:1000px;
}
#div3 {
    float:left;
    width:460px;
    height:100%;
    background-color: red;
}
#div4 {
    float:left;
    width:270px;
    height:1000px;
    background-color: green;
}
#div5 {
    float:left;
    width:25px;
    height:1000px;
    background-color: blue;
}
#div6 {
    float:left;
    width:269px;
    height:1000px;
    background-color: orange;
}

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
        <div id="div6"></div>
    </div>
</div>

确保 #div3 使用完整的 height 而不在 #div2 上明确设置，一种可能的方法是使用 flexbox。

#div1 {
    width:1024px;
    height:auto;
}
#div2 {
    float:left;
    width:100%;
    height:auto;
    display: flex;
}
#div3 {
    width:460px;
    background-color: red;
}
#div4 {
    width:270px;
    height:1000px;
    background-color: green;
}
#div5 {
    width:25px;
    height:1000px;
    background-color: blue;
}
#div6 {
    width:269px;
    height:1000px;
    background-color: orange;
}

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
        <div id="div6"></div>
    </div>
</div>

- Hidden Hobbes

Answer 2

由于您的问题根源是一个嵌套在另一个div中的div，因此它的高度百分比是从其容器中获取的。例如，如果父div的高度为50px，则子div上的100％将意味着它的高度为50px。但是，由于您的父div的高度是自适应的，所以它会根据实际高度来确定子div的高度。希望这可以帮助您解决问题。 :p

- user3608589

---

内联样式只是为了测试呵呵。这是错误的，这就是问题所在。父级div高度为1000px，因为里面有其他div，它们的高度也为1000px（出于测试目的）。 - Diogo Almeida

啊好的，那就没问题哈哈:) 第二部分有点让我困惑？ - user3608589

Answer 3

你可以将父元素div1的高度设置为1000px，并将子元素的高度设置为:inherit。 以下是一个示例：

#div1
{
    width:1024px;
    height:1000px;
    background:red;
    overflow:hidden;
}
#div2
{    
    float:left;
    width:100%;
    height:inherit;
    background:yellow;
}
#div3
{    
    float:left;
    width:460px;
    height:inherit;
    background-image:url('http://www.ricoh-imaging.co.jp/english/r_dc/caplio/r7/img/sample_04.jpg');
    background-size:100% 100%;
    background-position:bottom;
    background-repeat:no-repeat;
}

#div4
{
    float:left; 
    width:270px;
    height:inherit;
    background:violet;
}

#div5
{
    float:left;
    width:25px;
    height:inherit;
    background:black;
}

#div6
{
    float:left;
    width:269px;
    height:inherit;
    background:blue;
}

<div id="div1" class="center">
    <div id="div2">
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5" ></div>
        <div id="div6"></div>
    </div>
</div>

这可能是一个解决方法。我希望它有所帮助。

- vicrec