Html CSS嵌套div高度100%不'；行不通

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

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

问题是Div3和Div4的预期高度都不是100%，我用firbug检查了前两个div的大小，它们都正常，填满了整个屏幕

---

对不起，我的英语不好，我希望你能理解我的问题：）

首先用内联方式写高度

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

---

关键是将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>


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

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

更新了所有百分比示例


HTML

#Div1
应该具有一定的高度，以允许其子元素在其中拉伸。Set#Div1{height:100%；}另外，您为Div4设置的高度应该在样式属性中。您必须为名为
Div1
的最外层div定义一个高度首先感谢您的回复：）我已经读到第一个div必须有一个定义的高度，以便其他div可以继承，但我无法设置固定高度，因为站点大小正在更改。我希望可以将#Div1 height设置为100%或类似的
html，body{height:100%；}
是神奇的调味品：）这是一个拼写错误：）
 <div id="Div4" style="height:100%;"></div>

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

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

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