フッター付きのWebページを作成した場合、コンテンツ量が少ないとフッターの下にブラウザとの隙間が空いてしまう事があります。
解決策は３つあります。
+++++++++++++++++++++++++++++++++++++++++++++++
①cssで隙間をフッター色で埋める
安直ですがその分副作用も出ないでしょう。
フッターの高さが大きくなることと同じなので見た目は恰好悪いかもしれません。特に最近のディスプレイは解像度が高いので。
html{
background-color:#333333; /*フッター色*/
}
body{
background-color:#ffffff; /*背景色*/
}
+++++++++++++++++++++++++++++++++++++++++++++++
②cssで隙間をなくす
次のようなhtml構造だったとします。
<html lang="ja">
<body>
<div id="wrap">
<header>ヘッダー</header>
<div id="contents">コンテンツ</div>
<footer id="footer">フッター</footer>
</div>
</body>
</html>
これに次のようなcssを当てます。
html,body{
height:100%;
}
#wrap{
width: 100%;
position: relative;
height:auto !important; /*IE6対策*/
height: 100%; /*IE6対策*/
min-height: 100%;
}
#contents{
padding-bottom:50px; /*フッター高さ*/
}
#footer{
height:50px;
position:absolute;
bottom:0;
}
html,bodyをブラウザの高さまで広げ、フッターを下部に固定、コンテンツをフッターの高さ分パディングするということですね。
実はこれはネットで検索して見つけたのですが、私の場合、なぜかうまくいきませんでした。理由は知識のない私にはわかりません。
+++++++++++++++++++++++++++++++++++++++++++++++
③javascriptライブラリ「FooterFixed.js」を使う
個人的にはjavascriptのライブラリ/プラグインはあまり使用したくないのですが、今回は他の方法が見つからなかったので使用しました。
結果、意図とした表示になりました。
使い方はプラグインを読み込み、フッターに「ID="footer"」を指定するだけです。
jQueryプラグインと紹介されていることも多いのですが、見た感じではjQueryは必要としていないように思えます。
作者さんのサイト
0 件のコメント:
コメントを投稿