designWeb全般webmasterデザインメモTOPコーディングCSSフッターをページ下部に固定する方法サイトを制作していると、ページ内容が少なく画面の下に余白がすごく空いてしまったりすることがあります。この余白がどうしても気になる場合はフッターをページ下部に固定していまえば良いのです。今回はCSSで簡単に固定する方法を紹介します。positionと高さでコントロールするまず、サイト全体を囲んでいる要素に「position:relative」を指定してあげます。フッターに「position:absolute」と「bottom:0」を指定します。あとは、サイト全体をブラウザ領域まで確保するためにhtml要素やbody要素を高さ100%を取ってあげれば常にページ下部にフッターが表示されるようになります。コンテンツとフッターが被らないようにフッターの高さ分だけコンテンツにpaddingを確保してあげます。5em;}DEMO以上が、CSSを使ってフッターをページ下部に固定表示させる方法となります。