CSS min-height 最小高さ max-height 最大高さ-CSSチュートリアル-php.cn

min-height と max-height スタイルプロパティを使用するのはなぜですか?

Css min-height を適用する場所の説明

中身のないオブジェクトが開かないようにオブジェクトボックスを設定することがありますが、中身が判別できないため、このままでは高さを固定できません。今度は、CSS で min-height を設定する必要があります。最小の高さにより、オブジェクトボックスが高くなります。コンテンツが小さい場合、最小高さでコンテンツを表示できます。コンテンツが最小高さよりも大きい場合、コンテンツが増加するにつれてオブジェクトも大きくなります。

Css max-height 最大高さの適用説明

この属性は、おそらく高さが増加し、レイアウトの美化と均一性に影響を与えるコンテンツが多すぎることを避けるため、ほとんど使用されません。たとえば、テーブル tr td テーブルオブジェクトには

ピクチャが含まれており、ピクチャの高さが不確かで、高すぎてピクチャが tr td テーブルを壊したくない場合は、制限する必要があります。 CSS max-height による画像の最大高さ。

CSS の最大高さと最小高さのディレクトリ

文法と構造

高さの最大値と最小値の使用例

max-height min-height 最大高さと最小高さの概要

css

max-width

1. 構文

min-heightとmax-heightの値は数値+html単位です

min-height:50px最小高さ50px

max-height:50px最大高さ50px

div{min-height:50px }

div{max-height:50px }

2. 最大高と最小高さの使用例

最小高さ (min-height:) と最大高さ (max-height:) を設定します。 ) 2 つのオブジェクトボックスの制限。アプリケーションの場合の効果を簡単に観察するために、2 つのボックスの CSS 幅と CSS 境界線スタイルを同じに設定します。

1. 対応するCSSコード

.divcss5-min,.divcss5-max{ width:300px; border:1px Solid #F00}

.divcss5-min{ min-height:60px}

.divcss5-max{ max-height:60px;

margin-top

:10px} 2. HTML ソースコードスニペット:

最小の高さは 60px です

最大高さおよび最小高さの場合のスクリーンショット

CSS の最大高さおよび最小高さの場合のスクリーンショット

Css div スタイルの最小値と最大値のスクリーンショット

4. 2 つのオブジェクトのコンテンツを増やします

最小の高さは次のとおりです。 60px＆lt;＆gt; ;

最大の高さは 60 ピクセルです

www.divcss5.com

コンテンツを追加します

< ;/div>

ここでは、2 つのオブジェクトボックスのコンテンツを 60 ピクセルの高さ制限を超えています

5. 実験的なスクリーンショット

ブラウザーの最小高さ最大高さの場合のスクリーンショット

min-height と css max-height をテストする

ヒント、CSS 名「.divcss5-max」に

overflow

:hidden スタイルを追加すると、最大高さを非表示にしてオーバーフローの内容を表示できます。

最大高さスタイルのバグを解決する CSS ケースのスクリーンショット

最大高さと最大高さの互換性を解決する DIV+CSS ケース

6. DIVCSS5 ケースの説明

2 つのボックスを設定し、1 つは最小値を制限します最小高さ制限のあるオブジェクトに多くのコンテンツが含まれていない場合、この時点ではオブジェクトは最小高さ制限値を表示します。コンテンツが高さの最小制限を超えており、注文に対応できる場合、オブジェクトの高さは自動的に増加します。後者は、コンテンツが小さい場合は高さの上限があり、差はありませんが、コンテンツが多くて高さの上限を超えてしまいます。ただし、オブジェクト自体はまだ最大の高さであるため、オーバーフローがオブジェクトボックスを超える場合は、CSS のオーバーフロープロパティを使用してオーバーフローコンテンツを非表示にすることができます。

3. max-height min-height の最大値と最小値のまとめ

最大値と最小値のスタイルは非常に使いやすく、固定高さの欠点を補っていますが、現在 IE6 ではサポートされていません。 IE7 以降のブラウザとその他のブラウザによるリンク次の記事では、ie6 の min-height 互換性と ie6 max-height の互換性について紹介します。

以上がCSS min-height 最小高さ max-height 最大高さの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。