今回はCSSでWebを演出する初心者さん向きのテクニックを紹介します。

Web制作を行っていると、フッターの位置のバランスが悪く見栄えが悪くなることがあります。

例えば、コンテンツが少ないとフッターの下に大きく余白ができてしまったりする場合とかありませんか。

memo

このCSSの方法を使えば、コンテンツの量が多いページはスクロールの一番下にフッターを表示し、コンテンツが少なくてスクロールがない場合でも画面の一番下にフッターを表示させることができます。

コンテンツが少なくても画面の一番下に配置されるフッターサンプル(コンテンツ量が少ない場合)

コンテンツが少なくても画面の一番下に配置されるフッターサンプル(コンテンツ量が多い場合)

上の二つのサンプルを比べてみていただくとわかると思います。

コンテンツ量が少ない場合は、画面下にフッターが配置されています。

ソースは次の通りです。

HTML

CSS

CSSでは、html、body、#containerに高さ100%を指定してあります。

フッターの高さ分のスクロールが発生しないように、#containerにフッターの高さ分の-130pxという下方向のマージンをしていることで、フッターの表示領域を#containerの表示領域に引っ張り上げています。

#containerの小要素である#footer-spaceにフッターの高さ分をheightでしていして、フッターがコンテンツにかぶって表示されないようにしてあります。

この記事と関連してると思われる記事:

    None Found