CSS で高さのパーセンテージが期待どおりに機能しないのはなぜですか?

CSS で高さのパーセンテージが機能しないのはなぜですか?

パーセンテージを使用する場合、CSS のブロック要素の固有の動作を理解することが重要です。ベースの寸法。幅のパーセンテージは期待どおりに機能しますが、高さのパーセンテージは逆説的な動作を示し、開発者を困惑させる可能性があります。

デフォルトの高さの決定

デフォルトでは、ブロック要素の高さは次のとおりです。その内容によって決まります。言い換えれば、要素はその内容に必要な高さに合わせて垂直方向に拡張されます。これは、本質的に要素を水平方向に拡張して親内の利用可能なスペースを埋める幅プロパティとは異なります。

パーセンテージのパラドックス

パーセンテージを使用して定義する場合要素の高さは、親要素の高さのパーセンテージを表します。ただし、親要素の高さは子要素の高さに依存することが多いため、フィードバック ループが作成されます。子要素の高さをパーセンテージに設定しても、親の高さに依存し、さらに親の高さも子の高さに依存するため、操作する具体的な値は提供されません。このサイクルにより、明確に定義された寸法の確立が妨げられます。

コンテンツ主導の高さ

コンテンツに依存しない幅とは対照的に、高さはコンテンツに直接影響されます。要素に含まれる内容。この依存関係により、親要素に特定の高さの値を指定することが必須となり、フィードバック ループが切断され、子要素の高さのパーセンテージの具体的な参照ポイントが提供されます。

説明する例

次のコードを考えてみましょう:

<div>
<pre class="brush:php;toolbar:false">#inner {
  height: 50%;
}

この例では、高さ#inner の高さは #outer の高さに依存します。ただし、#outer の高さは #inner の高さにも依存します。 #outer の高さを指定しないと、フィードバック ループにより、#inner が明確に定義された高さを持つことができなくなります。