セブではたらく(インターン)
セブではたらく(インターン)
2012.07.24

隙間を埋める!フッターをウィンドウ下部に固定する3つの方法

モモコ

html要素とbody要素に背景色を指定する

【css】

html{
     background-color:#333333; /*フッターの色を指定*/
}
body{
     background-color:#ffffff;
}

必要な記述はこれだけです。
あとはお好みでフッターの背景色と合わせたり、グラデーションを指定して端の色と合わせたりすると綺麗ですね。
ただ、あまりにもコンテンツが少ないと、画面の殆どが背景色で埋まるのが難点です…。

javascriptを使用する方法

【HTML】

<script type="text/javascript" src="path/footerFixed.js"></script>

head内でjsを読み込ませ、フッター部分にid=”footer”を指定すれば自動でウィンドウの一番下にフッターを配置してくれます。
footerFixed.js」は必要な記述が少なく、フッターを固定するjsの中で特に使いやすかったのでオススメです。

  • 1
  • 2