ヘッダー・フッター・メインコンテンツでページを構成する場合、フッターの位置を適切な場所に配置するスタイル
ページの下に位置するフッターですが、ページの内容がない場合イメージの左の様にヘッダーが上に上がってしまいます。それをCSSで下にする方法です。HTML
<div class="container"> <header>ヘッダー</header> <main>コンテンツ</main> <footer>フッター</footer> </div>
CSS
html, body { margin: 0; width: 100%; height: 100%; } .container { position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%; } footer { width: 100%; height: 60px; background-color: #999; position: absolute; bottom: 0; }調整は必要なので各自で行なって下さい。