CSS 高度：100% 与自动：有什么区别？

理解 CSS Height: 100% 与 Height: Auto 之间的区别

在 Web 开发领域，CSS 高度的概念: 100% 和 height: auto 可能会让初学者感到困惑。为了阐明这两个属性之间的差异，让我们深入研究它们的含义并通过示例来说明它们。

CSS height: 100%

当指定 height: 100% 时对于一个元素，实质上是让它占据其父容器高度的 100%。这意味着该元素将始终拉伸以填充其父级中可用的垂直空间。例如，如果您有一个高度为 50px 的 div，并且将 height: 100% 应用于其子 div，则子 div 的高度也将为 50px。

CSS height: auto

另一方面，在元素上设置 height: auto 可以让它根据其内容自动调整其高度。此属性不会将元素限制为特定的高度限制。相反，该元素将动态调整大小以容纳其中的任何内容，而不管其父级的尺寸如何。以高度为 auto 的 div 和两个高度分别为 10px 和 20px 的子 div 为例。父级 div 的高度将自动调整为 30px 以适合其子级的高度。

示例演示：

为了进一步说明这些概念，请考虑以下 HTML和 CSS 代码：

<div>
<p>在此示例中，#innerDiv 的高度：100% 并且将占据其父 div 的整个 50px 高度。</p>
<pre class="brush:php;toolbar:false"><div>
<p>在这种情况下，#innerDiv 的 height: auto 并将自动调整自身大小以适应其高度为 10px 的子 div #evenInner 。因此，#innerDiv 的高度也将是 10px。</p>
<p>综上所述，CSS height: 100% 确保元素占据其父容器的整个高度，而 CSS height: auto 允许元素占据其父容器的整个高度。动态适应其内容，无论父级的尺寸如何。了解这些差异对于有效的网页设计和布局控制至关重要。</p>
</div>