CSS `height: auto` 和 `height: 100%` 有什么区别？

理解 CSS 中“height: auto”和“height: 100%”之间的细微差别

使用 CSS 设计元素样式时，属性“height: auto”和“height: 100%”可用于控制元素的垂直尺寸。然而，了解它们的不同行为对于实现预期结果至关重要。

'height: 100%'

当 'height: 100%' 应用于元素时，它继承其父容器的垂直空间。换句话说，它根据父级的高度进行拉伸和收缩。

例如，如果您有一个

高度为 500px 并应用 'height: 100%;'对其子元素 'innerDiv' 来说，'innerDiv' 的高度也将是 500px。

'height: auto'

相反，'height: auto'将元素的高度设置为其固有大小。这意味着它将适应它包含的内容，允许子元素影响其尺寸。

例如，如果我们将另一个子元素“evenInner”添加到“innerDiv”，高度为 10px，则“innerDiv”会自动将其高度调整为 10px，无论其父容器的高度如何高度。

示例：

<div>
<p>在这种情况下， 'innerDiv' 的高度为 500px，因为它继承自其父级。</p>
<pre class="brush:php;toolbar:false"><div><p>这里，'innerDiv' 的高度为 10px，因为它的子元素'evenInner' 需要这个空间。</p></div>