Question

我希望有人可以帮我解决这个问题。我有这样的结构

<div id="Div1" style="height:auto">
 <div id="Div2" style="height:100%;">
  <div id="Div3" style="min-height:100%;"></div>
  <div id="Div4" style="height:100%;"></div>
 </div>
</div>

我也输入了我的css文件

html,body
{
  height: 100%;
}

问题是Div3和Div4都没有100％的预期高度，我用firbug检查前两个div的大小，它们没问题，填满整个屏幕。

抱歉我的英语不好，我希望你理解我的问题：）

Answer 1

首先以内联样式写入高度

 <div id="Div4" height:100%;"></div>

更改为

 <div id="Div4" style="height:100%;"></div>

Answer 2

关键是将id为“Div1”的div的高度设置为“auto”以外的值。尝试100％或像这样的特定值

<div id="Div1" style="height:100%;">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" height:100%;"></div>
</div>
</div>

Answer 3

看看这个。使用百分比时，每个div都会受到其父级高度的影响。

在此示例中，html,body的高度为100%，然后每个div子项的百分比相对于其父级。请注意每个div的大小是其父div的一半，每一步缩小一半。

更新了所有百分比示例

Simple example

HTML

<div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
}
div {
    height: 100%;
    background: #F00;
}
div div {
    background: #FF0;
    height: 50%;
}
div div div {
    background: #000;
    height: 50%;
}
div div div div {
    background: #F30;
    height: 50%;
}

CSS嵌套div高度100％不起作用

3 个答案: