CSSでフッターをウィンドウ最下部に固定する方法【初心者向け】
初心者向けにCSSでフッターをウィンドウ最下部に固定する方法について解説しています。ページのコンテンツの量が多ければ問題ないのですが少ない場合はフッターがページの真ん中に表示されてしまうことがあります。コンテンツ量が少なくてもフッターをページ最下部に固定する方法について解説しています。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
CSSでフッターをウィンドウ最下部に固定する方法について解説します。ページのコンテンツ量が少ない場合でもフッター部分がページ最下部に固定されるようにします。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
CSSでフッターをウィンドウ最下部に固定する方法について詳しく説明していくね！
お願いします！
フッターを最下部に表示する書き方
ウェブデザインでは、フッターが画面下部にくっついているものは結構多くあるのではないかと思います。
コンテンツがたくさんあって、全てのページが自然と縦長になるサイトなら全く問題ないのですが、コンテンツが少ないページがある場合、フッターを下に固定させ、なおかつ長いページのときは成り行きの位置に配置することが必要な場合があります。
そんな時に使える、jQueryを使わずに、CSSだけで下部に固定させる方法を紹介します。
まずはHTMLを用意します。
<body>
<div class="wrapper">
<div class="container">
<p>現在、このサイトは製作中です。</p>
</div>
<footer>
<p>(c)copy right</p>
</footer>
</div>
</body>
それではCSSを書いていきましょう。
実際に書いてみよう
まずは全体の枠の高さの最小値を決めます。
高さの最小値なので、min-heightを使います。
そしてブラウザによって高さは異なるので、vhという、画面の大きさを基準にした単位を使用します。
100vh が、ブラウザの画面の高さになりますので、まず.wrapper に min-height: 100vh;と指定します。
.wrapper{
min-height: 100vh;
}
footer{
/*footerの装飾*/
width: 100%;
background-color: #89c7de;
color: #fff;
text-align: center;
padding: 30px 0;
}
次に、position の設定を書いていきましょう。
.wrapperを相対位置として、その中でfooterの位置を最下部に決めるようにします。
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
}
footer{
width: 100%;
background-color: #89c7de;
color: #fff;
text-align: center;
padding: 30px 0;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
これで、最下部に固定されました。
しかし、このままでは下図のようにコンテンツと被ってしまうタイミングがあります。
これを解決するには、padding-bottomとbox-sizingを使います。
.wrapperにまず、footerの高さ分のpadding-bottomを与えます。
今回は、だいたい120pxくらいでしょうか・・・。
このままだと、コンテンツが少ない時も下にはみ出てしまうので、続けてbox-sizing: border-box; を与えて、paddingを含めて、min-height: が100vhになるようにします。
.wrapper{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom: 120px;/*←footerの高さ*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
footer{
width: 100%;
background-color: #89c7de;
color: #fff;
text-align: center;
padding: 30px 0;
position: absolute;/*←絶対位置*/
bottom: 0; /*下に固定*/
}
これで、コンテンツが少ない時も、下に固定されるfooterを作ることができました。
| この記事を監修してくれた方
和田 祥子（わださちこ） テニスと音楽とビールが好きです。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
オンラインのプログラミングスクールTechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。
また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
