CSSでフッターを下付けに配置する方法

ヘッダー・フッター・メインコンテンツでページを構成する場合、フッターの位置を適切な場所に配置するスタイル
ページの下に位置するフッターですが、ページの内容がない場合イメージの左の様にヘッダーが上に上がってしまいます。それを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; }
調整は必要なので各自で行なって下さい。

コメントを残す

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