Question

对html / css中嵌套容器的高度感到困惑。对于前在这种情况下，如果inner2和inner1有明确的http://jsfiddle.net/Y59a7/，则为{{3}} 高度100％，然后height:100%似乎工作，它看起来像小提琴。

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

Answer 1

以下是如何思考它：

inner3的高度等于其包含div（inner2）高度的100％。

但inner2如何计算它的高度？在您的示例中，inner2没有明确的高度设置，其高度将是显示其内容所需的最小高度。（考虑填充和边距）。

因此inner3的高度为inner2，inner2的高度将为inner3的自然高度。

Answer 2

试试这个demo

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

Answer 3

如果你想要inner3占据100％的高度，那么所有父母的身高都需要设置为100％，甚至是身体和html

css中嵌套容器的高度

3 个答案: