コンテンツ量が少ない時でも、
cssだけでフッターを最下部に固定する方法
一般的なサイト・ページを作成していく際は、コンテンツ量が大きくなりスクロールバーが表示されて一番下の位置にフッターが表示されるようになりますが、コンテンツ量が少ない場合、フッターが上部に表示されてしまう事があります。
事例のサンプルなどは後述していますが、そういったコンテンツ量が少ない場合のページだと、フッターが真ん中あたりに出てしまったり、宙に浮いたような見た目になってしまいます。
特にこれ自体がなにかあるわけではありませんが、見た目的になんとなくフッター＝一番下というイメージがあるため、これを嫌うという方も多いように感じます。そのためこういった見た目の時に、フッターは最下部に表示したいという事があります。
今回はそれについてまとめておきたいと思います。
実際の事例を見て確認
とはいえ実際に見ないとイメージがわかないという方もいるかもしれませんので、それぞれの実際のサンプルを用意してみたのでご確認ください。
コンテンツ量が少なく、フッター真ん中あたりに表示されてしまうといった例になります。
こういう見え方の時、最下部に固定する方法についてです。
position:absolute;を使う方法
実装する方法としては3種あるのですが、まずその1つがposition: absolute;を使う方法です。
footer{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}実際にはフッターのデザインなどによって入れるタグなども変わるかもしれませんが、絶対配置のボトム指定を入れる事で、フッターを最下部に固定表示する事が可能になります。
とはいえ、これにも色々とケースによっては問題がある場合も出てきます。
absoluteの指定だけだと、コンテンツが長い時に弊害も出る
絶対配置ということで、いわばこのフッター領域は浮くことになります。
そのため、上記デモページのように、コンテンツ量が少ない場合は問題ないのですが、他のページでコンテンツ量が多いページになった場合には、当然フッターの表示がおかしくなります。
この場合、全体を囲む枠を作り、高さ指定もしておく
そのため、absolute指定でフッターを最下部に固定したいという場合、特に複数ページで使い回すような場合は、全体を囲む枠を作り、更にフッターの高さ分、paddingの指定をしておく必要があります。
<div class="wrapper">
<header>
・・・
</header>
<main>
・・・
</main>
<footer>
・・・
</footer>
</div>.wrapper{
position: relative;
min-height: 100vh;
padding-bottom: 100px;
}
footer{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
}このように、wrapperなどの枠で囲って、フッターの高さ＋余白分などをpadding-bottomで指定すると、コンテンツが少ない時でも、コンテンツが長居時でも問題なくフッターが最下部に固定されて表示することができます。
position:fixedを使って固定する方法
固定という言葉を聞くと、どちらかというとこのイメージの方が強いかもしれませんが、もう1つの方法がposition: fixed;を使うものになります。
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}こちらも実際のフッターデザインなどでタグは変わるかもしれませんが、先ほどのabsoluteがfixedに変わっただけというイメージになるかもしれません。
ただこれも、absoluteと同じように、使い道が限られたところになってきます。
fixedで作るとどんな時も最下部にフッターが表示される
コンテンツ量が少ない場合は、fixedを使って作るとフッターは最下部に表示されます。
しかしながらその一方で、fixedの特徴としてコンテンツ量が多いページの場合は、フッターが常に表示されてスクロールする度に、常にフッターがウィンドウの最下部に表示されるという事になってしまいます。
absoluteの時と同じように、コンテンツ量が少ないというケースであればなんら問題はないのですが、別のページでコンテンツ量が多いページとなった場合、ページが表示された時点で最下部にフッターが表示され、fixedの特徴上、スクロールしてもずっと付いてくる形になってしまいます。
そのため、コンテンツが長い場合は意図したフッターの見せ方と異なる恐れが出てきます。
flexを使って固定する方法
最後の方法が、display: flex;を使う方法です。
.wrapper{
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer{
margin-top: auto;
}こちらを使う場合、全体を含んだ大枠が必要になります。
その大枠に、display: flex;を指定して、表示をカラム形式、高さを100vhとすることで、フッターが最下部に表示されます。
先ほどのpositionの表示形式と違って、flexの場合はフッターの高さを指定する必要もないため、コンテンツが少なかろうが多かろうが、フッターに編集が入って高さが変わろうが、最下部に固定できるようになります。
wrapperなどの囲うdivが必要になる
とはいえこれもデメリットというかマイナス要素があり、それがこのフッターを含む大枠が必要になるという点です。
先ほどのposition: absolute;の場合は、コンテンツが長いページでも使うという場合に高さ指定をするため、枠で囲う必要があり、コンテンツが短い場合では特に囲う枠は不要でしたが、display: flex;を使用する場合は、囲いが必ず必要になってしまいます。
一般的にレイアウトとしてはヘッダー、メイン、フッターといった流れになる事が多いですが、フッターを含む大枠が必要になるという事は、
<div class="wrapper">
<header>
・・・
</header>
<main>
・・・
</main>
<footer>
・・・
</footer>
</div>といったように、全ての大枠となるwrapperやcontainerなどのdiv要素の入れ子にしていくという作りになってしまいます。
flexが無かった、一昔前のfloatやテーブルデザインの時代であれば、全体をwrapperなどで囲ってデザインする事はよくありましたが、今はあまり全体をwrapperで囲むというのも減ってきたようにも思うので、この作り方が好きじゃ無いという方もいるかもしれません。
ただこの作りであれば、フッターの高さを考慮しなくて最下部に固定できるので、一番管理やメンテなども楽と言えるのかもしれませんね。
まとめ
通常のサイト制作であれば、多くの場合はスクロールバーが表示されるほどのコンテンツ量を備える事が多いのですが、そうでない時、フッターが上部に表示されるとなんとも気になるデザインになりがちです。
そういう時、最下部で固定化させる主な方法の3種を紹介しましたが、それぞれに一長一短というか特徴があり、やりやすさなどもあります。
管理やメンテの事を考えたらflexを使うのが楽かもしれませんが、そもそも大枠のタグが必要になるので既存サイトの場合、そのためだけに全ページのタグを書き換えるかという必要性もあります。
そういうケースであれば、absoluteを使って、フッターの高さ分の値を指定して置く方が楽かもしれません。自分たちのサイトのシチュエーションに合わせてどの使い方が望ましいかを考えて選ぶようにしましょう。
個人的には、そもそもフッターを最下部に固定したいというのは特定のケースのみになることがほとんどですから、そのページだけに使うという意味で、position: absolute;の形を使う事がほとんどかなと思います。
display: flex;を使うやり方は、高さ指定が無いのは便利なのですが、HTMLタグの修正も別途しなければいけないといった事で手間も増えるので、そもそもの目的がコンテンツ量が少ない時にフッターを最下部に固定するという方法のため、cssだけにちょろっと修正したら完成できるやり方がなんだかんだでベストかな？と考えています。
記事のシェアにご協力お願いします