フッター要素を常に下付きにしたい

css

案件にて、フッター要素を下付きにしたいということで調べてみたのでメモ。
案件にもよるが、要素が少ない場合はフッター要素が上に来るのが嫌だとう場合もあるので!
まぁだいたいは、同じなので調べれば出てくると思います。

cssでの組むときのポイント

とりあえず結果としてのhtmlとcssを記述

cssは下記のようにする。幅や高さは適当

<動作確認はこちら

となる。ざっとポイントの解説は下記のサイトが詳しく載ってます

Webの道草 CSSでフッターを下付き表示にする

lucky bag フッタを常に下部に配置

WEB工房きくちゃん フッターを画面の下に表示

特に個人的に感じたのはfooterを包むコンテナ「ajastContainer」の高さを常に100%にして相対位置にしてフッター要素をabsoluteで常にbottom:0の位置に配置するのがポイント。また、フッター要素の上の要素「content」にパッディングボトムでフッター要素の高さ分のピクセルを確保するところもポイントだと思った。