8月更新・前月(7月)の人気記事トップ10 08/02/2022
- ( 01 – ) 【Mac】MacにGoogle Driveをインストール
- ( 04 ↑) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 02 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
- ( 04 – ) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 06 ↑) 【jQuery】入門5. jQueryで日時を表示
- (圏外↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- (圏外↑) 【Guide】画面解像度一覧表
- (圏外↑) 【Mac】Time Machineの初回バックアップ完了を待機中でバックアップが終わらない場合はこれで解決!
- (10↑) 【Labs】クリックしやすいラジオボタンとチェックボックス
- (圏外↑) 【Inkscape】InkscapeでCMYKカラーを表示する
【Labs】CSSで要素の高さ100%を指定する方法
こんにちは(・∀・)
以前【Labs】表示しているブラウザの高さを取得してCSSのheightに指定で要素の高さをjQueryで取得する方法をご紹介しましたが、実はCSSだけでも要素の高さを100%にする事ができるのです。
その時の投稿でも触れましたが、高さの単位「vh」を使えば簡単に要素の高さ100%を指定することができます。
viewport height
CSSで高さの単位「vh」を使うとviewportの高さの割合を指定することができます。
この「vh」という単位は「viewport height」の略で、他にもvw、vmin、vmaxなどがあり、それらを使ってCSSの幅や高さを指定することもできます。「1vh = 1%」で、height: 100vh → height: 100%となります。
vw | viewport width | viewportの幅の割合 |
vh | viewport height | viewportの高さの割合 |
vmin | viewport minimum | viewportの幅と高さの値が小さい方の割合 |
vmax | viewport max | viewportの幅と高さの値が大きい方の割合 |
height: 100vh
height: 100vhで要素hogeの高さを指定する場合の例。親要素はhtml、bodyです。
.hoge {
height: 100vh;
}
viewport heightの場合、高さの指定をしたい要素にheight: 100vhを指定するだけです。
height: 100%
height: 100%で要素hogeの高さを指定する場合の例。親要素は同じくhtml、bodyです。
html,
body,
.hoge {
height: 100%;
}
今まで通りのやり方の場合、高さの指定をしたい要素の親要素全てにheight: 100%の指定をする必要がありますが、古いブラウザでも使用することができます。
ちなみに、コンテンツ量が画面サイズより大きい場合、heightではなくmin-heightで指定するのがポイントです。そうすることでコンテンツの長さに応じた高さを表示してくれます。
min-height: 100vh
.hoge {
min-height: 100vh;
}
min-height: 100%
html,
body {
height: 100%;
}
.hoge {
min-height: 100%;
}
要素ごとに高さが違う時にこの指定の仕方をするとうまく高さを出してくれます。
高さの単位「vh」を使えば、要素の高さ100%を指定することができるので、表示デバイスによって高さが変わってしまうようなデザインでも簡単に対応させることができます。
IEは9以上で使用できます。IE9といえばWindows Vistaです。なので「vh」はもう解禁でいいと思います。
ただし、要素にposition:absoluteが指定してあると高さを出してくれませんので注意する必要があります。
関連リンク
【Labs】表示しているブラウザの高さを取得してCSSのheightに指定