スポンサード リンク
min-heightプロパティ
HTML要素の高さの最小値を指定できます(paddingを含まない高さ)使い方(書式)
セレクタ { min-height: 値; }
min-heightプロパティ
対応ブラウザ | |
適用できる要素 | ブロック要素と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>
実際の表示
原寸大の画像です