この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。
footer下の隙間をどうにかする方法ということで、
CSS Sticky Footerを参考にしました。
cssメモですね。これは使えるので是非覚えておきたい。
以下引用です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 142px; /* .push must be the same height as .footer */ } |
追記（2013/12/11）
久しぶりにCSS Sticky Footerを見に行ったら、HTML5 CSS Sticky Footerなんて記述を発見！
早速メモです。
せっかくなので簡単なサンプルを作りました。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="wrapper"> <header> <h1>FOOTER下の隙間をCSSでどうにかする方法 サンプル</h1> </header> <article> <h2>FOOTER下の隙間をCSSでどうにかする方法 サンプルですよ</h2> </article> <aside> </aside> <div class="push"></div> </div> <footer> © <a href="https://blog.696.jp/">696graphic [BLOG]</a>. All rights reserved. </footer> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -155px; } footer{ background:#39F; text-align:center; line-height:155px; } footer, .push { height: 155px; } |
基本は変わってないので取っ付きやすいですね。
サンプルはこちらです。