Html css中嵌套容器的高度

对html/css中嵌套容器的高度有点困惑。 例如，在这种情况下-如果

inner2

和

inner1

具有明确的 高度100%，然后

height:100%

似乎起作用，或者看起来像小提琴中的那个

    <div class="container">
      <div class="inner1">
        <div class="inner2">
          <div class="inner3">
            asdlfalsjdflk
            asldkflaflkjkalf
          </div>
        </div>
      </div>
    </div>

asdlfalsjdflk
ASLDKFLKJKALF

试试这个

---

下面是如何看待它的：

inner3

的高度等于其包含div的高度的100%（

inner2

）

但是

inner2

如何计算它的高度呢？在您的示例中，

inner2

没有明确的高度设置，因此其高度将是显示其内容所需的最小高度。（考虑到填充和边距）

---

因此，

inner3

的高度为

inner2

，而

inner2

的高度为

inner3

的自然高度。如果您希望inner3占据100%的高度，则所有家长的高度都需要设置为100%，即使是body和html

您也应该在问题中包含css。但是它要求用户为每个嵌套容器添加明确的高度？那太无聊了。

{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;    
}