ブログ

フリーランスとして働くWebデザイナーの備忘録・メモ

footerをウィンドウ下部に固定するjs

コンテンツ量が少ない場合、フッターがブラウザの下部で止まって欲しいのに、上に上がっちゃう問題を「footerFixed.js」で解決します。

javascriptライブラリとしてこちらで公開してくださっています。
設置方法はDLしたfooterFixed.jsを読み込みます。DLは上記サイトからhttps://blog.webcreativepark.net/sample/js/36/footerFixed.js
を開いて、名前をつけて保存。
自分の置きたいjsフォルダに格納。
リンクは以下

ウィンドウ下部に固定したい要素にid属性「footer」を付けます。

<footer id=”foter”></footer>

これだけでfooterを下部に固定させることができます。

もし、コンテンツ量がウィンドウサイズより多い場合は通常通りスクロールしたら表示されますが、コンテンツ量がウィンドウサイズより小さい場合は下部に配置されます。