menu
menu

キーワード検索

 

前月(5月)の人気記事トップ10 - 6/3/2019

  1. ( 3 ↑) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 1 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 8 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. (圏外↑) 【制作Tips】画面解像度一覧表
  7. ( 10 ↑) 【制作Tips】iPad画面解像度まとめ
  8. (圏外↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  9. ( 9 - ) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  10. ( 6 ↓) 【決定版】フォントの設定はこれで決まり❗️
このエントリーをはてなブックマークに追加

【CSS】CSSで要素の高さ100%を指定する方法

【CSS】CSSで要素の高さ100%を指定する方法

こんにちは(・∀・)

以前表示しているブラウザの高さを取得してCSSのheightに指定で要素の高さをjQueryで取得する方法をご紹介しましたが、実はCSSだけでも要素の高さを100%にする事ができるのです。

その時の投稿でも触れましたが、高さの単位「vh」を使えば簡単に要素の高さ100%を指定することができます。

viewport height

CSSで高さの単位「vh」を使うとviewportの高さの割合を指定することができます。

この「vh」という単位は「viewport height」の略で、他にもvwvminvmaxなどがあり、それらを使ってCSSの幅や高さを指定することもできます。「1vh = 1%」で、height: 100vh → height: 100%となります。

vwviewport widthviewportの幅の割合
vhviewport heightviewportの高さの割合
vminviewport minimumviewportの幅と高さの値が小さい方の割合
vmaxviewport maxviewportの幅と高さの値が大きい方の割合
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が指定してあると高さを出してくれませんので注意する必要があります。

関連リンク

表示しているブラウザの高さを取得してCSSのheightに指定

  • CSS3 高さ100%
このエントリーをはてなブックマークに追加