cman.jp > WEBページ作成TOP > CSSリファレンス > 「高さの最大値、最小値」
WEBページ作成
広告
max-height,min-height 「高さの最大値、最小値」
要素の高さの制限を指定します。
「max-height」は、要素の高さの最大値を指定します。
「min-height」は、要素の高さの最小値を指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 | 全て ※１ | しない |
広告
max-height,min-height の指定方法
| 構文 | |
|---|---|
|
max-height : length | none; min-height : length; |
|
| プロパティ/設定値 | 意味 |
|
max-height: none; max-height: 100px; max-height: 80%; |
高さの最大値の制限なし（初期値） 高さの最大値を値で指定。負の値は指定不可。 「長さ・大きさの単位」参照 デフォルト：「タグ毎のスタイル初期値」を参照 |
|
min-height: 100px; min-height: 80%; |
高さの最小値を値で指定。負の値は指定不可。 「長さ・大きさの単位」参照 デフォルト：「タグ毎のスタイル初期値」を参照 |
max-height,min-height のサンプル
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css_max-height_none{
max-height : none;
}
.css_max-height_10{
max-height : 10px;
}
.css_max-height_100{
max-height : 100px;
}
.css_min-height_10{
min-height : 10px;
}
.css_min-height_100{
min-height : 100px;
}
<!-- html -->
<div class="common">
<div class="cssTitle">max-height : none;</div>
<div class="css_max-height_none">
高さ制限なし。要素にあわせた高さで表示。～高さ制限なし。要素にあわせた高さで表示。
</div>
<div class="cssTitle">max-height : 10px;</div>
<div class="css_max-height_10">
高さの最大値を超える部分ははみ出して表示。～高さの最大値を超える部分ははみ出して表示。
</div>
<div class="cssTitle">max-height : 100px;</div>
<div class="css_max-height_100">
高さの最大値内で、要素にあわせた高さで表示。～高さの最大値内で、要素にあわせた高さで表示。
</div>
<div class="cssTitle">min-height : 10px;</div>
<div class="css_min-height_10">
最小値の高さを超える部分は、要素にあわせた高さで表示。最小値の高さを超える部分は、要素にあわせた高さで表示。
</div>
<div class="cssTitle">min-height : 100px;</div>
<div class="css_min-height_100">
最小値の高さで、要素と余白を表示。～最小値の高さで、要素と余白を表示。
</div>
</div>
max-height : none;
高さ制限なし。要素にあわせた高さで表示。高さ制限なし。要素にあわせた高さで表示。高さ制限なし。要素にあわせた高さで表示。
max-height : 10px;
高さの最大値を超える部分ははみ出して表示。高さの最大値を超える部分ははみ出して表示。高さの最大値を超える部分ははみ出して表示。
max-height : 100px;
高さの最大値内で、要素にあわせた高さで表示。高さの最大値内で、要素にあわせた高さで表示。高さの最大値内で、要素にあわせた高さで表示。
min-height : 10px;
最小値の高さを超える部分は、要素にあわせた高さで表示。最小値の高さを超える部分は、要素にあわせた高さで表示。
min-height : 100px;
最小値の高さで、要素と余白を表示。最小値の高さで、要素と余白を表示。最小値の高さで、要素と余白を表示。最小値の高さで、要素と余白を表示。
| 関連するCSS(STYLE) | |
|---|---|
| height | 高さ |
| line-height | 行の高さ |
| min-height | 高さの最小値 |
広告