追従するものがある時に高さを調整する

ブラウザの下に追従するものが付いている場合がありますが、そういうものがあった場合にfooter要素に追従する要素の高さ分padding-bottomをとるjavascriptです。

デモページ

javascript

getElementsByClassNameの返り値はgetElementByIdとは少し違う

昔ハマったのですが、getElementByIdと同じ感覚でgetElementsByClassNameを取ろうとすると失敗します。
getElementByIdはidが返ってくるのですが、getElementsByClassNameは違います。

与えられたクラス名で得られる子要素すべての配列ライクのオブジェクトを返します。
document オブジェクトで呼び出されたときは、ルートノードを含む、完全な文書が検索されます。

document.getElementsByClassName – Web API インターフェイス | MDN

試しにfixed_bottomをconsole.logで見て見ると下記のように。

複数ある場合は配列が増えますが、今回は1個だけなので直接指定します。
fixed_bottomのclientHeightを取りたいので、配列0番目のclientHeightという感じにしてあげるとうまく値が取れます。

デモページ

  • コーダーのための計算機