CSS div高度100％不起作用

Question

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>

Answer 1

问题的根源，因为它是div中的div 100％从其容器中取值，如果父div的高度为50px，则子div上的100％意味着它的高度为50px但是你的父div有auto的高度所以它取任何高度:)希望这有助于：p

Answer 2

Using a percentage based height relies on an explicit height value being set on the parent element:

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

Content height: the 'height' property ( http://www.w3.org/TR/CSS21/visudet.html#the-height-property )

In this case the parent element is #div2 which has height: auto; . This means that its height depends on the height of its content and is not explicitly declared.

If you were to apply the height explicitly to #div2 (eg height: 1000px; ) then using height: 100%; on #div3 would work.

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

One possible way of ensuring that #div3 uses the full height without setting it explicitly on #div2 is to use 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> 

Answer 3

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.