min-heightプロパティ

TOPページに戻る > CSS

スポンサード リンク

min-heightプロパティ

HTML要素の高さの最小値を指定できます(paddingを含まない高さ)
指定した値より低くなりません
値はpx、emなどの単位、親ブロック要素の割合を%で指定、none(最小値の設定なし)
paddingの幅はmin-heightの高さには含まれません。paddingを指定している場合、min-heightの高さ+paddingが要素の最小値の横幅になります
min-heightといっしょにmax-heightを使うことができます。その場合、mix-heightが100px、max-heightが200pxに指定すると100px~200pxの範囲に高さを限定できます
※IE6が対応していません IE7から対応しています

使い方(書式)

セレクタ { min-height: 値; }

min-heightプロパティ

対応ブラウザ ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 ブロック要素とtd th input textarea select img
子要素へのスタイルの継承 しない

プロパティの値 説明
単位 px、emなどの単位
% パーセントで指定。親ブロック要素の割合を%で指定
none 最小値の制限なし、初期値

実際の指定方法

.hogeimg {
 min-height: 300px;   /* 高さに300pxの最小値を設定 */
 }
.hoge {
 min-height: 150px;   /* 最小値が150pxの横幅に指定 */
 border: solid 1px;  /* 枠線を表示 */
 height:50px;         /* 高さを50pxの高さに指定してみます */
 }
.hogebox {
 height: 80px;       /* 親boxの高さ */
 border: solid 1px blue;  /* 枠線を青色で表示 */
 }
.hoge2 {
 min-height: 50%;     /* 最小値が親ブロック要素の50%の高さ */
 border: solid 1px;   /* 枠線を表示 */
 }
.hoge3 {
 min-height: none;    /* 初期値 */
 border: solid 1px;   /* 枠線を表示 */
  }

html部分

<img src="a200.gif" alt="">
<br>
<img class="hogeimg" src="a200.gif" alt="">
<br>
<div class="hoge">min-height: 150px; 高さは150px以下にはなりません</div>
<br>
<div class="hogebox">
<div class="hoge2">min-height: 50%; 親boxの50%より高さが低くなりません</div>
</div>
<br>
<div class="hoge3">min-height: none;</div>

実際の表示

原寸大の画像です

下がmin-height: 300px;を指定した画像。値より画像が小さい場合、ほとんどのブラウザは縦横比維持で拡大されます


min-height: 150px; 高さは150px以下にはなりません

min-height: 50%; 親boxの50%より高さが低くなりません

min-height: none;




(C)2012 ホームページ作成無料