css高度之间的差异：100％vs height：auto

Question

我在接受采访时被问到“css height:100%和height:auto之间有什么区别？”

任何人都可以解释一下吗？

Answer 1

height:100%表示该元素将具有其父容器的100％高度。

height:auto意味着，元素将具有灵活的高度，即其高度将取决于子元素的高度

请考虑以下示例：

<强>高度：100％

<div style="height:50px">
    <div id="innerDiv" style="height:100%">
    </div>
</div>

#innerDiv将有height:50px

<强>高度：自动

<div style="height:50px">
    <div id="innerDiv" style="height:auto">
          <div id="evenInner" style="height:10px">
          </div>
    </div>
</div>

现在#innerDiv将有height:10px

Answer 2

高度为100％，大概是浏览器内部窗口的高度，因为这是其父级的高度，页面。 auto身高将是包含所必需的 的最小身高。

Answer 3

浏览器中的默认值为height: auto，但height: X%定义包含块的百分比高度。

Answer 4

height：100％如果父容器具有指定的height属性，则无法正常工作