ワードプレスなどのニュース一覧ページなど、動的にした結果。

実装する時は記事数を量産して、表示がちゃんとされるかの確認はしているけれど、いざ、運用始まって記事数が最初少なかった場合や、まだ記事が何もない状態の時に、コンテンツ幅が画面幅足りず、フッターが画像のように画面の中途半端な位置になり、余分な余白ができてしまう！

なんてことを、わりかし見逃しがちなんじゃないかな？（最近見逃しました←）と思った＋考えたこともなかった。って人も多いんじゃないかなと思ったので、

どんなコンテンツ幅になろうとも、フッターがきちんと画面幅の一番下に表示されるように実装しよう！！！

CSSとjQueryで実装する方法がありますが、今回はCSSでの実装を書いていきます！

まずはHTML。ここでのポイントはheaderからfooterまでの全ての要素を囲む<div>タグを付けること。ここは任意のクラス名、divタグ以外でもOK！とにかく全体を囲んであればOK！！今回はcontentsというクラス名をつけてあります。

  <div class="contents">
        <header>
           <!--＊ヘッダーの内容が入ります-->
        </header>
        <main>
            <!--*コンテンツの内容が入ります-->
        </main>
        <footer>
           <!--*フッターの内容が入ります-->
        </footer>
    </div>

次にCSSはこちら↓

.contents{
    min-height: 100vh; /* コンテンツの高さの最小値 ＝ ブラウザの画面の高さに指定 */
    position: relative;
    padding-bottom: 80px; /* フッターの高さを指定 */
    box-sizing: border-box;  /* すべての要素の高さ＝min-height:100vhになるように指定 */
}

footer{
    position: absolute;
    bottom: 0;
}

上記を記述することで、フッターは常にclass=”contents”の領域の中で一番下に表示されるようになる！！！！！！！！

ちなみに、fixedで下にやればいいじゃん？って軽く考えたそこのあなた←

fixedでbottom:0;にしてもフッターは画面の一番下に表示はされる。だがしかし、コンテンツ幅が増えてスクロールした場合でも常に画面下部に固定されていることになるので、コンテンツの高さが十分な時には、スクロールした先の一番下にフッターがいて欲しい場合はfixedだとうまくいきません！

コンテンツ量が確実に増える確率が0％の時などはfixedを使っての実装でもいいかもしれません。が今回は

動的にコンテンツ量が変わることを想定しての実装なので、fixedではない方法の紹介でした＼(^o^)／

ワードプレスなど、動的に動くからこそ、見逃しがちな些細な気づきでした！
こういう細かい部分まで気を配って実装できる素敵な製作者になろうね！！！！！

今回は短いけれど、以上です！！！お！わ！り！