html - css中嵌套容器的高度

Question

对 html/css 中嵌套容器的高度有点困惑。例如。在这种情况下 - http://jsfiddle.net/Y59a7/如果 inner2 和 inner1 有显式高度 100%，然后 height:100% 似乎可以正常工作，否则它看起来像 fiddle 中的那个。

    <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 的自然高度.