footerを最下部へ設置する方法

空のページのようにコンテンツがない状態でもfooterを画面の一番下に設置する方法(fixedではなく)はないかなと思い調べました。

すると

html { 

 position: relative;

 min-height: 100%;

}

footer {

 position: absolute;

 bottom: 0;

}

とすると可能なようですね。

これにプラスしてページ全体にfooterと同じ高さのマージンをとると良いとのことです。

参考リンク

CSSだけで実装する！短めページの隙間なしフッタ – 株式会社AIコミュニケーション – 総合WEBプロモーション