on:2016年6月17日sponsors高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。Ways下記は各ポイントを意訳したものです。※元サイト様のライセンスに基づき、翻訳しています。その1フッタ以外のすべての要素をdiv要素で内包し、フッタの高さと等しいマイナスのネガティブマージンを使って、フッタを最下部に表示します。50px;}実装のポイントは、コンテンツ内に空の要素(.push)を加えることです。この空の要素はコンテンツが多い時に、フッタとコンテンツがネガティブマージンで重なってしまうことを回避するものです。空の要素(.push)の高さはフッタと同じ高さに指定します。(@chriscoyier)デモのデフォルト時はコンテンツ量が少ない状態で、フッタを最下部に表示。Content」ボタンをクリックするとコンテンツが追加されて、成り行き状態になります。その2このテクニックでは空の要素(.push)を必要としない代わりに、ラッパー要素を一つ加えて実装します。追加したラッパー要素にネガティブマージンを指定して、フッタを最下部に表示します。2のテクニックでは、ドキュメントとは関係ないHTML要素を加える必要があります。余分なHTML要素を加える必要がない実装方法の一つが、calc()でラッパーの高さを調整する方法です。フッタとコンテンツが重なることもなく、2つの要素が合計で100%の高さになるように積み重なります。50px;}フッタの高さが「50px」で、なぜ「-70px」になっているか不思議に思った人もいるでしょう。これはコンテンツの下に20pxのマージンを与えた値です。100vhから引き算する値は、フッタの高さにコンテンツの下のマージンを加えた値を指定します。高さが不明なフッタを最下部に実装(flexbox)上記3つのテクニックの問題点は、フッタの高さが固定された値であるということです。これはフッタの高さを変更した際に、他のコードも修正する必要が生じます。フッタの高さが変化する場合は、flexboxを使って、フッタを最下部に表示します。余分な要素も必要としません。1;}flexboxを使ったテクニックでは、ヘッダなどの他の要素を加えることもできます。flexboxで使っている方法はいずれかです。「flex:1;」は、フリーのポジティブなスペースがある場合にそのスペースを満たすようにエリアを確保します。この場合はコンテンツです。「margin-top:auto;」で隣接要素から子要素を押し出します。flexboxのプロパティの挙動について、更に詳しい情報は下記をご覧ください。Layout」を使って、フッタを最下部に表示します。flexboxと同様に、高さが不明なフッタを最下部に実装できます。Layoutについて、更に詳しい情報は下記をご覧ください。Layout」を利用できます。