こんにちは。
今回はCSSでフッターをウィンドウの最下部に固定する方法！です。
先日、フッターをウィンドウの最下部に固定する案件があったので、そのやり方を紹介したいと思います。
フッターをウィンドウの最下部に固定する方法！
まずはHTMLです。
全体をdivで囲みます！
1 2 3 4 5 6 7 8 9 10 | <body> <div id="wrap"> <div id="content"> <p>コンテンツです。</p> </div> <footer id="footer"> <p>フッターです。</p> </footer> </div> </body> |
次にCSSです。
フッターの高さぶんだけ、コンテツ部分にpadding-bottomをとっています！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | body , html { height: 100%; } #wrap { height: auto!important; /*IE6*/ height: 100%; /*IE6*/ min-height: 100%; } #content { padding-bottom: 40px; } #footer { position: absolute; bottom: 0; height: 40px; } |
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
いかがでしたか。CSSだけでできるのがいいですね！
以上でCSSでフッターをウィンドウの最下部に固定する方法！でした。
