CSS div高度100％不起作用 [英] CSS div height 100% not working

问题描述

div2的高度为1000px.我不明白为什么div3不能达到100％的高度，而是0px的高度.

div2 is 1000px height because of div4, div5 and div6. I'm not understanding why div3 isn't getting the 100% height, it is 0px height.

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

推荐答案

您可以将父级div1的高度设置为1000px，并将子级的高度设置为:inherit. 这是一个示例:

You could set the height of parent div1 to 1000px and set the children's height to :inherit. Here's an example:

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

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

It could be a workaround. I hope it helps.

这篇关于CSS div高度100％不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！