フッターの下に余白を空けないための方法

ページ作成中、コンテンツのボリュームが少ないときなど、フッターの下に余白が出来てしまう場合の対処法を記します。

フッターが最下部に固定されず余白が出来てしまっている。

このようにフッターを最下部に固定します。

HTML

CSS

htmlとbodyのheightを100%と指定することで
コンテンツの内容に合わせて画面の高さが伸びていきます。

ヘッダー、フッターを含む #wrapperのpositionをrelativeとして
子要素であるフッター(footer)のpositionをabsoluteにし、
bottom:0 で最下部に指定します。

(大きいディスプレイで画面を引き伸ばしてもフッターの下に余白ができることはありません。)

なお、コンテンツ領域のレイアウトを決めるcontentクラスの
padding-bottom にフッターと同じ高さ(ここでは100px)を指定することで、
画面をタテに狭めたときに中身がフッターで隠れないようにしています。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください