”シンプル”なデザインを、”フツー”のWEBサイトを

WEBデザインの際、ウィンドウを目いっぱいつかいたい。そんな事あるのではないでしょうか?横幅100%はすぐに出来ますが、高さの100%ってどのように指定すれば良いのか。

基本的に、WEBページでは外側の要素の高さは内側の要素の量によって決まるので、ウィンドウの大きさに高さを合わせる、というのは地味に結構面倒臭かったイメージがありました。

ただ、今回調べてみるとjQueryをつかえば簡単に解決したので、今更な話だとは思いますが、備忘録代わりにその方法を紹介します。これなら旧来のやり方のようにbodyやhtmlタグに高さを指定する必要もありません。

ウィンドウに合わせて高さ100%にするやり方

まずはこちらのデモを見てみてください。

ウインドウの高さに合わせて高さ100%にする方法デモ

ウィンドウの大きさを変えてもらうと分かると思いますが、濃いグレーのdivの高さがウィンドウの大きさに合わせて可変します。デモではわかりやすいように、高さ100%にしたdivの下にもう一つ薄いグレーのdivを置いています。

HTML部分

<div class="box"> 
<p>ウィンドウの大きさに合わせて高さが100%になっています</p> 
</div>

JavaScript部分

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script> 
$(document).ready(function () { 
  hsize = $(window).height(); 
  $(".box").css("height", hsize + "px"); 
}); 
$(window).resize(function () { 
  hsize = $(window).height(); 
  $(".box").css("height", hsize + "px"); 
}); 
</script> 

JQueryをつかった方法になるので、jQuery本体を読み込む必要があります。
で、その下に要素の高さをウィンドウの大きさに合わせるためのscriptを記述します。

高さを100%にしたい要素のクラス(デモでは[class=”box”])はIDにしても問題ありません。その際、JavaScript内の5行目と9行目の部分も書き直してください。

(おまけ)高さ100%にした要素の縦横の中央に要素を配置

上記のやり方で画面いっぱいに要素を広げることが出来たと思います。となると、そのド真ん中に中の要素を配置したくなるのが人情。いや、まあ個人的によくつかうだけなんですけどね・・・

そこでおまけとして、その方法も書いておきます。最初のデモが既に中央寄せになっているので見てもらえればと思います。

高さ100%にした要素(デモでは[class=”box”])に、

position: relative;

を指定します。

で、その中で中央寄せにしたい要素(デモではp)を、

position: absolute; 
top: 50%; 
left: 50%; 
-webkit-transform: translateY(-50%) translateX(-50%); 
transform: translateY(-50%) translateX(-50%); 

とします。

これでウィンドウの大きさに合わせて高さが100%になる要素の縦横中央に、中の要素を配置出来ると思います。