ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で div の高さを設定する場合の「height: 100%」と「min-height: 100%」の違いは何ですか?

CSS で div の高さを設定する場合の「height: 100%」と「min-height: 100%」の違いは何ですか?

Mary-Kate Olsen
リリース: 2024-10-31 10:57:01
オリジナル
827 人が閲覧しました

What's the difference between `height: 100%` and `min-height: 100%` when setting a div's height in CSS?

身長:100% vs. 最小身長:100%

質問:

CSS を使用して div の高さを設定する場合、「height:100%」と「min-height:100%」の違いは何ですか?

答え:

World Wide Web Consortium (W3C) は、これら 2 つのプロパティ間の関係を次のように定義しています:

  1. div の初期の高さは、「min-height」と「max-height」を考慮せずに決定されます。
  2. 初期の高さが「max-height」を超える場合は、計算された高さとして「max-height」を使用して高さを再計算します。
  3. 逆に、結果の高さが「min-height」より小さい場合は、計算された高さとして「min-height」を使用して高さを再計算します。

概要:

  • 「Min-height」は計算された高さをオーバーライドします。
  • 「Max-height」は、指定された高さが低い場合は指定された高さを無効にすることができますが、「min-height」を無効にすることはできません。

特定のケース:

  • "Height:100%" は、要素の高さを包含ブロックの高さと等しく設定します。
  • "Min-height:100%"より低い高さが明示的に指定されている場合でも、高さが少なくとも 100% であることが保証されます。 「max-height」でオーバーライドできないことに注意してください。

以上がCSS で div の高さを設定する場合の「height: 100%」と「min-height: 100%」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート