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

css

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

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

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




 //調整するためのコンテナ
　

　　
ここはコンテンツ領域

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

html,body{
        margin:0; 
        height:100%;
}

#ajastContainer{ 
        min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	position: relative;	
}

#content{
       width:800px; 
       height:auto;
      padding-bottom:400px;
}

#footer{
       width:800px; 
       height:400px;
       position:absolute;
       bottom:0;
}

<動作確認はこちら

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

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

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

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

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