コンテンツが少ない時にフッターが上に来てしまう問題

Webサイトを作っていると、コンテンツが少ないページで気づいたらフッターが上に来てしまうケースに遭遇します。

トップページや個別ページなど、コンテンツが豊富なページは下に下にフッターが追いやられるので、そうでないページはフッターが上にせり上がりよろしくありません。

その対策について。

margin-top:auto;で解決

色々、解決方法があるのですが一番はfooterにmargin-top:auto;を付けるのが一番シンプルで良いのかなと思います。

これにより、上のマージンが可変するので、コンテンツが少ないページでも一番下に配置されます。

他にも、position:relative,absoluteの方法もありますが、margin-top:auto;が自分には分かりやすいです。

この方法知らない時に、目算で値入れたりして、よくよく考えるとパソコン画面や大型ディスプレイで縦の値はいくらでも変わるじゃないか、どうしたらええねんとヤキモキしていました。

自分の場合、footerにシンプルにmargin-top: auto;を設定して、その下にfooter-wrapのような形で包んで上げて、フッターと上部コンテンツとの余白を設定しています。