Question

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

Answer 1

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

Answer 2

使用基于height的百分比依赖于在父元素上设置的显式height值：

指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。根元素的百分比高度相对于初始包含块。

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

在这种情况下，父元素为#div2，其height: auto;。这意味着其height取决于其内容的height，并且未明确声明。

如果您明确将height应用于#div2（例如height: 1000px;），那么在height: 100%;上使用#div3即可。

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

 <SeekBar
            android:id="@+id/slider"
            android:layout_width="fill_parent"
            android:layout_height="30dp"               
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/progress_drawable" />

Answer 3

您可以将父div1的高度设置为1000px，并将孩子的身高设置为:inherit。这是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS div高度100％不起作用

3 个答案: