人は誰しも地に足をつけて生きている。
それがあるべき姿だからだ。
なればこそ、人が操るものにもその真理を当てはめたいと思うのもまた、人としての正しい姿なのかもしれない。
ってなことでですね。
フッターをブラウザのサイズとかページ内コンテンツの高さに依存せず常に下の方にいさせよう、ってな感じの記事はちょくちょく見かけますよね。それだけ多くの人がそれを望むってことは、やっぱり本能的に足は血に浸け……あ、いや、地に着けておくのが良いって思っているからーー
なんてことはないですよね、うん^_^;
フッターを固定する方法はいくつかあると思います。『position:absolute』と『bottom:0』とかを組み合わせたりとかいろいろやり方はあると思うんですが、今回は（個人的に）極力簡単な方法でそれを実装できるようにしてみたいと思います。
一応cssだけで実現はできますが、後半ちょっとjavascriptを使った応用っぽい感じのこともやってます。
ま、とりあえず行ってみましょー。
そしたらこんな感じのスタイルを書く。
これでオーケーです。
ようは、フッターじゃない部分（上だとwrapperの部分）でブラウザの高さを全部奪っちまおうって寸法です。heightを100%にすると自動的にブラウザの高さになりますからね。
でも当然ながら、こうするとフッター部分が常にブラウザからはみ出た状態になってしまいます。それを回避するために、ネガティブマージンってのをやってます。
wrapperに指定している『margin-bottom:-100px』ってのがそうですね。これはwrapperでmargin-bottomを指定する代わりに、フッターの方で『margin-top:-100px』ってやっても大丈夫だと思います。やってることは一緒だからね。
あかつきのお宿でもこの手法を使ってます。トップページとか、サイズのでかいディスプレイでブラウザを開いたりすると、フッターが下の方に来て真ん中下辺りがぽっこり開いた感じになります。
IE6とか7にも対応するためには、wrapperの方でheight:autoとは別にheight:100%も指定する必要があるっぽい感じなんですが、申し訳ないことにお宿はその辺の対応をしていないので、今回は見捨てます。すまそ。
でも多分、こんな書き方で良いんだと思う。確認はしてないけど。
これで上手く行かなかったらごめん。他の文献を参考にするか、「おいこら動かねえ。解決策を寄越せ」って脅しを掛けてくれれば、もう半泣きで調べます。
そんなときは、空のdivタグを入れて回避しちゃいましょう。本当は空タグを入れるのあまり好きじゃないんだけど、まあ、今回は目をつむるってことで>_<
cssを別に書くのがめんどかったんでそのまま書いちゃいましたが、こんな感じですね。
こうするとちょうどフッターの高さ分の何もないブロックができるので、フッターが食い込んできてもその中に収まる感じでメインコンテンツの方までは浸食してきません。
上の場合だと、フッターの高さが固定になってしまいますよね。それで問題なければ文字通りまさに何の問題もないんですけど、フッターの高さが動的に変わるかもしれないような場合は、これだとちょっと不都合ですよね。
だからフッターの高さをjavascriptで取得して、その分だけネガティブマージンを取ったりしたいと思います。
まあ、3行くらいのお手軽な感じなので、面倒なことはないです。
これならフッターの高さが変化しても大丈夫ですね。『innerHeight()』のところは『height()』でも良いと思いますが、innerHeightだとpaddingの分の高さも取ってくれるから、今回はこっち使ってます。
あ、ちなみにjqueryを使ってるって前提でお願いしますね。使ってなくてもそのせいで処理が複雑にはなったりしないと思うけど。
jqueryを使わない場合は、たぶんこんな感じになるかしら？
いかかでしょうか。
最初にも言いましたが、フッターを固定する方法ってたくさんの人が紹介してくれているので今さら感全開な感じはあるんですけど、逆にいろいろなやり方が目についてしまって、どれを採用するのが良いかな～って迷ってしまう可能性もあるんじゃないかと思いまして……。
なので今回は、その数ある参考文献の中でも、比較的僕がやりやすかった方法を出してみました。
まあ、ここにまた一つフッターを固定するための記事が誕生してしまったわけで、情報動乱の渦に加勢する感じになっちゃわないか心配ですけど、とりあえずこの記事見とけば簡単に実装できるよよぉ～……って、自信を持って言っても大丈夫、かな……？ かな……？
ところで『アブソリュート』って単語、かっこよくね？
絶対零度って、英語で言うと『アブソリュート・ゼロ』だぜ？
必殺技っぽいぜぇ？ ワイルドだぜぇ？
それがあるべき姿だからだ。
なればこそ、人が操るものにもその真理を当てはめたいと思うのもまた、人としての正しい姿なのかもしれない。
ってなことでですね。
フッターをブラウザのサイズとかページ内コンテンツの高さに依存せず常に下の方にいさせよう、ってな感じの記事はちょくちょく見かけますよね。それだけ多くの人がそれを望むってことは、やっぱり本能的に足は血に浸け……あ、いや、地に着けておくのが良いって思っているからーー
なんてことはないですよね、うん^_^;
フッターを固定する方法はいくつかあると思います。『position:absolute』と『bottom:0』とかを組み合わせたりとかいろいろやり方はあると思うんですが、今回は（個人的に）極力簡単な方法でそれを実装できるようにしてみたいと思います。
一応cssだけで実現はできますが、後半ちょっとjavascriptを使った応用っぽい感じのこともやってます。
ま、とりあえず行ってみましょー。
まずはHTMLの構成から
ざっくりと書いちゃいますけど、一つのページをフッターとそれ以外で分割するような作りにします。<body>
<div id="wrapper">メインコンテンツ</div>
<div id="footer">フッター</div>
</body>
そしたらこんな感じのスタイルを書く。
html{
height:100%;
}
body{
height:100%;
}
#wrapper{
height:auto;
min-height:100%;
margin-bottom:-100px;
}
#footer{
height:100px;
}
これでオーケーです。
ようは、フッターじゃない部分（上だとwrapperの部分）でブラウザの高さを全部奪っちまおうって寸法です。heightを100%にすると自動的にブラウザの高さになりますからね。
でも当然ながら、こうするとフッター部分が常にブラウザからはみ出た状態になってしまいます。それを回避するために、ネガティブマージンってのをやってます。
wrapperに指定している『margin-bottom:-100px』ってのがそうですね。これはwrapperでmargin-bottomを指定する代わりに、フッターの方で『margin-top:-100px』ってやっても大丈夫だと思います。やってることは一緒だからね。
#wrapper{
height:auto;
min-height:100%;
}
#footer{
height:100px;
margin-top:-100px;
}
あかつきのお宿でもこの手法を使ってます。トップページとか、サイズのでかいディスプレイでブラウザを開いたりすると、フッターが下の方に来て真ん中下辺りがぽっこり開いた感じになります。
IE6とか7にも対応するためには、wrapperの方でheight:autoとは別にheight:100%も指定する必要があるっぽい感じなんですが、申し訳ないことにお宿はその辺の対応をしていないので、今回は見捨てます。すまそ。
でも多分、こんな書き方で良いんだと思う。確認はしてないけど。
#wrapper{
height:auto !important;
height:100%;
min-height:100%;
}
これで上手く行かなかったらごめん。他の文献を参考にするか、「おいこら動かねえ。解決策を寄越せ」って脅しを掛けてくれれば、もう半泣きで調べます。
ブラウザを縮め過ぎたときの対処
これで一応実装はできたんですが、実際やってみると分かるんですけど、コンテンツの高さが少ないページを開いてブラウザの高さを縮めて行くと、メインコンテンツの方にフッターが少しだけはみ出した感じになっちゃうと思います。ぐいぐい押して来ると思います。そんなときは、空のdivタグを入れて回避しちゃいましょう。本当は空タグを入れるのあまり好きじゃないんだけど、まあ、今回は目をつむるってことで>_<
<body>
<div id="wrapper">
メインコンテンツ
<div style="height:100px"></div>
</div>
<div id="footer">フッター</div>
</body>
cssを別に書くのがめんどかったんでそのまま書いちゃいましたが、こんな感じですね。
こうするとちょうどフッターの高さ分の何もないブロックができるので、フッターが食い込んできてもその中に収まる感じでメインコンテンツの方までは浸食してきません。
javascriptでもうちょい動的に
さて、冒頭でも書きましたが、上記のやり方を踏まえた上で、javascriptによる応用編、行ってみたいと思います。上の場合だと、フッターの高さが固定になってしまいますよね。それで問題なければ文字通りまさに何の問題もないんですけど、フッターの高さが動的に変わるかもしれないような場合は、これだとちょっと不都合ですよね。
だからフッターの高さをjavascriptで取得して、その分だけネガティブマージンを取ったりしたいと思います。
まあ、3行くらいのお手軽な感じなので、面倒なことはないです。
//フッターの高さを取得
var footerHeight = $('#footer').innerHeight();
//ネガティブマージン
$('#wrapper').css('margin-bottom', '-'+footerHeight+'px');
//空divの挿入
$('#wrapper').append('<div style="height:'+footerHeight+'px"></div>');
これならフッターの高さが変化しても大丈夫ですね。『innerHeight()』のところは『height()』でも良いと思いますが、innerHeightだとpaddingの分の高さも取ってくれるから、今回はこっち使ってます。
あ、ちなみにjqueryを使ってるって前提でお願いしますね。使ってなくてもそのせいで処理が複雑にはなったりしないと思うけど。
jqueryを使わない場合は、たぶんこんな感じになるかしら？
//フッターの高さを取得
var footer = document.getElementById('footer').offsetHeight;
//ネガティブマージン
document.getElementById('wrapper').style.marginBottom = '-'+footer+'px';
//空divの挿入
var elem = document.createElement('div');
elem.style.height = footer+'px';
document.getElementById('wrapper').appendChild(elem);
いかかでしょうか。
最初にも言いましたが、フッターを固定する方法ってたくさんの人が紹介してくれているので今さら感全開な感じはあるんですけど、逆にいろいろなやり方が目についてしまって、どれを採用するのが良いかな～って迷ってしまう可能性もあるんじゃないかと思いまして……。
なので今回は、その数ある参考文献の中でも、比較的僕がやりやすかった方法を出してみました。
まあ、ここにまた一つフッターを固定するための記事が誕生してしまったわけで、情報動乱の渦に加勢する感じになっちゃわないか心配ですけど、とりあえずこの記事見とけば簡単に実装できるよよぉ～……って、自信を持って言っても大丈夫、かな……？ かな……？
ところで『アブソリュート』って単語、かっこよくね？
絶対零度って、英語で言うと『アブソリュート・ゼロ』だぜ？
必殺技っぽいぜぇ？ ワイルドだぜぇ？
