CSS 高さ: `100%` と `auto` – 本当の違いは何ですか?

CSS の高さ: 100% と高さ: auto の違いを理解する

CSS では、高さプロパティは要素の垂直方向の寸法を定義します。ただし、それに割り当てられた値によって異なる結果が生じる可能性があります。

高さ: 100%

この値は、要素の高さを要素の高さの 100% に設定します。その親コン​​テナ。言い換えると、要素は親内の利用可能な垂直方向のスペース全体を埋めます。

height: auto

auto は、要素の高さが以下に基づいて自動的に計算されることを示します。そのコンテンツのサイズについて。この値は、コンテンツが動的で高さが異なる場合によく使用されます。

説明の例

違いをさらに説明するには、次のようにします。

例 1: 身長: 100%

<div>
<p>この例では、外側の div の高さは 50px に固定されています。内部 div に height: 100% を割り当てると、親コンテナの 50 ピクセル全体が埋められます。</p>
<p><strong>例 2: height: auto</strong></p>
<pre class="brush:php;toolbar:false"><div><p>この例ではたとえば、外側の div の高さは再び 50px になります。内側の div の高さは auto であるため、コンテンツに合わせて高さを調整します。この場合、高さ 10px の 2 番目の div です。したがって、内側の div の高さは 10px になります。</p></div>