CSS Secret Garden: Sticky footers_html/css_WEB-ITnose

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

問題

Web デザインにおいて、スティッキー フッター デザインは、ほとんどの人が一度は経験したことがある最も古く、最も一般的な効果の 1 つです。これは次のように要約できます。ページのコンテンツが十分な長さでない場合、フッター ブロックはウィンドウの下部に貼り付けられます。コンテンツが十分な長さの場合、フッター ブロックはコンテンツによって押し下げられます。

この効果は遍在していて人気があるだけでなく、驚くほど簡単に達成できるように見えます。しかし、実際の導入には予想以上に時間がかかりました。さらに、CSS 2.1 のソリューションでは、ほとんどの場合、フッターの高さが固定に設定されます。これは非常に脆弱であり、実現可能であることはほとんどありません。実際、この効果を実現するには複雑すぎて、特定のタグといくつかのハック方法を追加する必要もあります。 CSS2.1 にはいくつかの制限がありますが、最新の CSS を使用すると、この効果をさらに向上させることができます。どうすればよいでしょうか?

この効果を見たことがないか、この問題に関する情報に興味がある場合は、Web 開発者の多くのアイデアと解決策を提供する人気の記事を以下に示します。

• CSS スティッキー フッター レイアウト
• Ryan Fait の CSS Sticky Footer
• Sticky Footer
• Sticky CSS フッター: 柔軟な方法
• モダンでクリーンな CSS "Sticky Footer"

最後の 2 つは最もクリーンな実装ですが、それでも独自の制限があります。

高さの固定ソリューション

要素の下でいくつかの一般的な HTML タグ要素を使用します。

<header>    <h1>Site name</h1></header><main>    <p>Bacon Ipsum dolor sit amet...    <!-- Filler text from baconipsum.com --></p></main><footer><p>&copy; 2015 No rights reserved.</p><p>Made with ♥ by an anonymous pastafarian.</p></footer>

ページの基本スタイルをいくつか記述します。表示される効果は次のとおりです。

次に、コンテンツをいくつか減らしてみましょう。以下に示すように、何が起こるかを確認できます。

問題はありますが、どうすれば解決できますか?

フッター テキストがコンテナーからオーバーフローしないと仮定すると、コンテナーの高さを導き出すことができます。

2行 * 行高 + 3 x 段落的margin + 垂直的padding ＝ 2 x 1.5em + 3 x 1em + 1em = 7em

同様に、ヘッダーの高さは 2.5em です。したがって、ビューポートの相対単位と calc() を使用すると、CSS の 1 行でスティッキー フッター効果を実現できます。

main {    min-height: calc(100vh - 2.5em - 7em);    /* Avoid padding/borders screwing up our height: */    box-sizing: border-box;}

あるいは、コンテナを使用して

#wrapper {    min-height: calc(100vh - 7em);}

body {    display: flex;    flex-flow: column;}

body {    display: flex;    flex-flow: column;    min-height: 100vh;}main { flex: 1; }