フッターの下に余白を空けないための方法
ページ作成中、コンテンツのボリュームが少ないときなど、フッターの下に余白が出来てしまう場合の対処法を記します。
フッターが最下部に固定されず余白が出来てしまっている。
このようにフッターを最下部に固定します。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>footer-fixx</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header class="header"> <h1>header</h1> </header> <main> <section class="content"> <h1>hoge</h1> </section> </main> <footer class="footer"> <h1>footer</h1> </footer> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
@charset "UTF-8"; /*デフォルトマージンを除去*/ *{ margin:0; padding: 0; } html, body { height: 100%; background-color: #FCE3BD; } #wrapper { width: 100%; position:relative; min-height: 100%; } .header { background-color: #4CFFFE; width:100%; height:100px; } .content { padding-bottom: 100px; } .footer { background-color: #57FF23; width:100%; height: 100px; position: absolute; bottom: 0; } |
htmlとbodyのheightを100%と指定することで
コンテンツの内容に合わせて画面の高さが伸びていきます。
ヘッダー、フッターを含む #wrapperのpositionをrelativeとして
子要素であるフッター（footer）のpositionをabsoluteにし、
bottom:0 で最下部に指定します。
（大きいディスプレイで画面を引き伸ばしてもフッターの下に余白ができることはありません。）
なお、コンテンツ領域のレイアウトを決めるcontentクラスの
padding-bottom にフッターと同じ高さ（ここでは100px）を指定することで、
画面をタテに狭めたときに中身がフッターで隠れないようにしています。
Follow me!
