CSS 高度：何时使用'100%”与'自动”？

CSS 高度属性导航：“100%”与“自动”

在最近的一次采访中，您遇到了有关 CSS 属性“height”之间区别的询问：100%'和'高度：自动'。让我们深入研究这些属性的细微差别，以阐明它们的差异：

'height: 100%'

当您将元素的 'height' 设置为 100% 时，这意味着该元素将占据其父容器高度的 100%。换句话说，元素将拉伸以适应其父元素的高度。

'height: auto'

相反，'height: auto' 使元素能够灵活地动态调整其高度。它允许元素呈现适合其内容的高度。元素的高度将根据其子元素的高度（如果有）自动调整。

这里有一个视觉插图来进一步阐明这些概念：

'height: 100%' 示例：

<div>
<p>在此示例中，“innerDiv”的高度等于父 div 的高度，即50px。</p>
<p>'height: auto' 示例：</p>
<pre class="brush:php;toolbar:false"><div>
<p>在此示例中，'innerDiv' 的高度为 10px，适应其子级 'evenInner' 的高度。 </p>
<p>通过使用“height: 100%”，您可以确保元素填充其父级的高度，而“height: auto”提供灵活性并调整元素的高度以适应其内容或子级。</p>
</div>