CSS 高さ: `100%` と `auto` をいつ使用するか?

CSS の高さプロパティの操作: '100%' と 'auto'

最近のインタビューで、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>「高さ: 100%」を使用すると、要素が親の高さを確実に埋めることができます。一方、「height: auto」は柔軟性を提供し、コンテンツや子に合わせて要素の高さを調整します。</p>
</div>