Sponsored Link
プロパティ・値の解説
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| min-height | 指定要素の最小限の高さのサイズ指定 | auto(初期値)・%・px・em・vh・svhなど |
CodePenで動作チェック
「min-height」の指定を行うことで実際にはどういった影響があるのかを、CodePenのウィンドウを使って動作チェックしてみましょう。
CodePenのウィンドウで以下の作業を行いましょう。
/* min-height: 100vh; */
↓「/*」「*/」を削除↓
min-height: 100vh;
See the Pen プロパティ:min-height by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
最小限の高さのサイズ指定プロパティ
htmlでのブロックの高さは、文字や画像のコンテンツ情報の量で決まってしまい、もしコンテンツが何もない状態だったら高さ0pxになり、ブロックの高さを保持できません。(そうなるとデザイン上、ページの最下部に設置しておきたいものがある場合かっこ悪いんです・・・)
何もコンテンツがない状態でも、高さを最小でも100%(ブラウザの表示領域の高さ)に保つために、ページの一番外側のブロックであるbodyタグに対し「min-height: 100vh;」を指定することで、最小限の高さを100vh※1に指定しています。
※1・・・「vhは」ブラウザウィンドウの高さの割合(参考:【CSS】vw、vh、vmin、vmaxとは?基本的な使い方 | JAJAAAN)