CSS div高度100％不起作用

迪奥戈·阿尔梅达（Diogo Almeida）

由于div4，div5和div6，div2的高度为1000px。我不明白为什么div3不能达到100％的高度，而是0px的高度。

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

玻璃体

您可以将parent的高度设置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>

这可能是一种解决方法。希望对您有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。