CSSでmin-heightとmax-heightを使用する方法

最大高さスタイルと最小高さスタイルは非常に使いやすく、固定高さの欠点を補います。この記事では、CSS で 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 最大および最小の高さの概要

詳細情報:

1. CSS はオーバーフロー コンテンツを非表示にします

2 . HTML コンテンツを非表示にする

3、css 非表示のコレクション

4、css height

5、css min-width

6、css max-width

構文と構造

min-height および max-高さの値は数値 + HTML 単位です

Exp

min-height:50px 最小高度50px
max-height:50px 最大高度50px

CSS 使用構造

div{min-height:50px }
div{max-height:50px }

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

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

1. 対応する CSS コード

.div-min,.div-max{ width:300px; border:1px solid #F00} 
.div-min{ min-height:60px} 
.div-max{ max-height:60px; margin-top:10px}

2. HTML ソース コードのフラグメント:

<div class="div-min"> 
    最小高度为60px 
</div> 
<div class="div-max"> 
    最大高度为60px 
</div>

2 つのオブジェクトのコンテンツを追加します

HTML コード:

<div class="div-min"> 
    最小高度为60px<br /> 
   增加内容<br /> 
    增加内容<br /> 
    增加内容 
</div> 
<div class="div-max"> 
    最大高度为60px<br /> 
    www.php.cn<br /> 
    增加内容<br /> 
     增加内容<br /> 
    增加内容 
</div>

ここで 2 つのオブジェクト ボックスのコンテンツを追加します

高さ制限60pxを超える場合のヒント ここではCSS名「.div-max」に

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

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

min-height と max-height を使用する方法はたくさんあります。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

HTMLにスペース文字を入力する方法

HTMLでp段落の行の高さと行間隔を設定する方法

ブラウザがhtml5をサポートしているかどうかを確認する方法

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