★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス

高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1

[tohokuaiki]

これいいいじゃんって思ったけど、IE11で崩れた…“html { height: 100%;}body { min-height: 100%; display: flex; flex-direction: column;}.content { flex: 1;}”

[noguful]

“grid-row-start: 2;”

[bleu-bleut]

未

[hpptms]

フッターを最下部に配置するテクニック。CSS難しい。

[s99e209]

コンテンツ量が少ない時のフッター表示の仕方はいつも苦戦するので、このテクニックまとめは有り難い。

[glat_design]

Flexboxのやつ、便利だ… /

[labduck]

最近よく言われる

[candykebin]

“calc()”

[s12bt]

よく困る

[masayoshinym]

Sticky Footerのサンプル。