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);}

これは、主に次の理由により、既存の高さ固定ソリューションよりもわずかに優れているように見えます。そのシンプルさ。ただし、レイアウトが単純であることを除けば、これは実用的ではありません。ラッピングするフッターテキストコンテナの高さを毎回計算する必要があるため、コンテナの最小高さを毎回計算する必要があります。タイトルとコンテンツをラップするために HTML コンテナを追加したい場合は別ですが、それは重要です。確かに、この時代では、私たちはもっと良くできるはずですよね？

Flexbox ソリューション

Flexbox は、この種の問題を解決するのに最適なソリューションです。これを完全に実現するには、数行の CSS コードが必要なだけで、奇妙な計算をしたり、余分な HTML 要素を追加したりする必要はありません。まず、 要素に display:flex を設定する必要があります。親要素 ( ) のブロック要素が 3 つあり、レイアウトを切り替えるために Flexbox を使用する場合、 flex-flow:column も設定する必要があります。そうしないと、3 つのブロックが並んでしまいます。以下に示すように:

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

この時点では、各要素が占めるビューポートの高さはそのコンテンツによって決まるため、ページは以前と同じように見えます。このように、Flexbox は真に活用されていないと言えます。

実用的な観点からは、 のコンテンツがウィンドウ全体を占めることができるように、 の min-height 値を 100vh に設定する必要があります。窓の高さ。これは完了していますが、効果は次の図のようになります:

に最小の高さが指定されている場合でも、各ボックスの高さは依然としてボディのサイズに依存します。その内容。

ここではヘッダーとフッターの高さを設定する必要がありますが、コンテンツの高さは残りのスペースに合わせて自動的に調整されます。

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

の flex 値を 0 より大きく設定できます:

flex プロパティは、flex-grow、flex の 3 つのプロパティの略称です。 -縮小とフレックスベース。いずれかの要素が flex を 0 より大きく設定すると、要素はコンテナーの残りのスペースに合わせてサイズを柔軟に制御します。たとえば、

が flex:2 に設定され、

が flex:1 に設定されている場合、同様に、フッターの高さはメイン コンテンツの高さの半分になります。 4 と 2 と 2 と 1 ではなく、倍数比の値が同じであるため、同じ効果があります。

それだけです。これ以上コードは必要ありません。以下に示すように、スティッキーフッター効果を実現できます:

わずか 4 行のコードで、Flexbox は非常に強力で完璧だと思いませんか?