menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

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

  • Labs

CSS3

こんにちは(・∀・)

以前表示しているブラウザの高さを取得して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に指定

  • カテゴリー:Labs