采用百分比表示的<代码><0>/代码>,依据的是明确的<代码>h 8,。 父母要素的价值:
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 (i.e., 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.
http://www.w3.org/TR/CSS21/visudet.html http://www.w3.org/TR/CSS21/visudet.html#the-hels-property 。
在这种情况下,括号为#div2,hels: auto;。 这意味着其<条码>八<>/代码>取决于其内容的<条码>,但并未明确宣布。
If you were to apply the height explicitly to #div2 (e.g. 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>
确保<代码>#div3的可能途径 不用在<代码>#div2上明确列出的,即可使用<代码>flex Box。
#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>
