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

Posted on 2017-03-08
Last updated on 2017-04-17

こんにちは（・∀・）

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

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

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

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

height: 100vhで要素hogeの高さを指定する場合の例。親要素はhtml、bodyです。


.hoge {
  height: 100vh;
}

viewport heightの場合、高さの指定をしたい要素にheight: 100vhを指定するだけです。

height: 100%で要素hogeの高さを指定する場合の例。親要素は同じくhtml、bodyです。


html,
body,
.hoge {
  height: 100%;
}

今まで通りのやり方の場合、高さの指定をしたい要素の親要素全てにheight: 100%の指定をする必要がありますが、古いブラウザでも使用することができます。

ちなみに、コンテンツ量が画面サイズより大きい場合、heightではなくmin-heightで指定するのがポイントです。そうすることでコンテンツの長さに応じた高さを表示してくれます。


.hoge {
  min-height: 100vh;
}


html,
body {
  height: 100%;
}
.hoge {
  min-height: 100%;
}

要素ごとに高さが違う時にこの指定の仕方をするとうまく高さを出してくれます。

高さの単位「vh」を使えば、要素の高さ100%を指定することができるので、表示デバイスによって高さが変わってしまうようなデザインでも簡単に対応させることができます。

IEは9以上で使用できます。IE9といえばWindows Vistaです。なので「vh」はもう解禁でいいと思います。

ただし、要素にposition:absoluteが指定してあると高さを出してくれませんので注意する必要があります。