[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック
Post on:2015年5月11日
sponsors
フッタをコンテンツ量が少ない時は最下部に固定表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのシンプルなテクニックを紹介します。
デモ
デモではコードを編集して、いろいろ試すこともできます。
Chrome, Safari, Firefox, Opera. IEは8+でご覧ください。
デモページ（コンテンツ量が少ない時）
コンテンツ量が少ない時はフッタは常に最下部に固定表示、多い時は成り行きで表示されます。
コードを編集できるので、コンテンツ量を多くしてみます。
デモページ（コンテンツ量が多い時）
コンテンツ量が多い時は通常通り、スクロールすると最下部に表示されます。
デモページ（コンテンツ量が多い時）
実装
HTML
最小限の構成はこんな感じです。
コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。
<body> <main> メイン コンテンツ </main> <footer> フッタ </footer> </body>
CSS
デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。
// STYLES - essential for sticky footer
html {
min-height: 100%;
position: relative;
}
body {
margin-bottom: 5em;
}
footer {
bottom: 0;
height: 5em;
position: absolute;
}
sponsors
