2015年04月20日(月)

画面サイズに合わせて高さを指定する3つの方法

• 0
• 0
• 0
• 293

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。

簡単なデモを作っていますのでご覧ください。

画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。

section { background: url(image.jpg) no-repeat fixed; background-size: cover; }

では、高さの指定方法を100%を例に3つ紹介します。

jQueryを使う

まずは、jQueryを使う方法です。個人的には１番なじみがあります。

$(document).ready(function () { hsize = $(window).height(); $("section").css("height", hsize + "px"); }); $(window).resize(function () { hsize = $(window).height...