ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS min-height 最小高さ max-height 最大高さ
CSS min-height 最小高さ max-height 最大高さ
- 巴扎黑オリジナル
- 2017-06-28 09:51:342408ブラウズ
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 1.1. 構文
min-heightとmax-heightの値は数値+html単位です
min-height:50px最小高さ50px
max-height:50px最大高さ50px
2.
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最大高さおよび最小高さの場合のスクリーンショット
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 サイトの他の関連記事を参照してください。