CSS の高さのパーセンテージが予期しない動作を引き起こす場合があるのはなぜですか?

CSS: 高さのパーセンテージの特徴を理解する

CSS では、パーセンテージ値を使用する場合、高さのプロパティが複雑な難問になることがあります。親要素のサイズに合わせて簡単に拡大縮小できる幅とは異なり、高さのパーセンテージ値は予期せぬ動作を引き起こすことがよくあります。

高さの欠落の謎

次の HTML と CSS を考慮してください:

<div>

#working {
  width: 80%;
  height: 140px;
  background: orange;
}
#not-working {
  width: 80%;
  height: 30%;
  background: green;
}

#working の幅は予想どおりビューポートの 80% に計算されますが、高さはビューポートの 80% に計算されます。 #not-working は不可解なことに 0 になります。

依存関係の解消

この問題の核心は、div などのブロック要素のデフォルトの高さにあります。デフォルトでは、ブロック要素の高さはそのコンテンツのサイズに準拠します。これにより、フィードバック ループが作成されます。

<div>

ここで、#inner はその中の段落に合わせて拡張され、#outer は #inner に合わせて拡張されます。

高さのパーセンテージ値により、これに別のレイヤーが追加されます。関係。高さのパーセンテージ (たとえば 30%) を指定すると、親要素の高さが参照されます。ただし、親要素の高さは子要素の高さの影響を受けるため、循環依存関係が生じます。

解決策

このジレンマを解決するには、フィードバック ループを断つ必要があります。これは、親要素の高さを明示的に設定し、子要素への依存を効果的に削除することで実現できます。たとえば、上記の例では、 #outer { height: 500px; を追加します。

結論として、ブロック要素の幅は独立しているため、幅のパーセンテージ値はシームレスに機能しますが、高さのパーセンテージの計算は本質的に結びついています。親要素の明確な高さの定義が必要です。

以上がCSS の高さのパーセンテージが予期しない動作を引き起こす場合があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。