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

CSS の高さのパーセンテージについて

CSS では、幅のパーセンテージ値は期待どおりに機能しますが、高さには同じことが当てはまりません。この動作を理解するには、ブロック要素のデフォルトの高さ計算を調べる必要があります。

デフォルトの高さ計算:

ブロック要素の高さは、その内容によって決まります。 。要素にテキスト、画像、またはその他のブロック要素が含まれている場合、その高さはコンテンツに合わせて拡大されます。

幅の割合と高さの割合:

を指​​定すると幅のパーセンテージでは、要素の幅は親の幅のパーセンテージとして計算されます。ブロック要素は本質的にその親と同じ幅であるため、この計算ではピクセル単位で明確に定義された値が得られます。

ただし、ブロック要素の高さはその内容によって異なります。高さ: 50% を指定すると、要素自体のコンテンツによって高さが変わる可能性がある場合に、親の高さの 50% が何になるべきかが明確ではないため、あいまいさが生じます。

フィードバック ループの解除:

この曖昧さを解決するには、親と子の間のフィードバック ループを断ち切る必要があります。これは、親要素の高さを明示的に指定することで実行できます。

例:

#parent {
  height: 200px;
}
#child {
  height: 50%;  /* Now calculates 50% of #parent's height */
}

親に特定の高さを指定することで、子要素の高さを定義された高さとして計算できるようになりました。パーセンテージを使用して、高さのパーセンテージを効果的に機能させます。

以上がCSS で高さのパーセンテージが幅のパーセンテージのように機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。