ホームページ > 記事 > ウェブフロントエンド > フッターを一番下に維持する最善の方法を教えてください_html/css_WEB-ITnose
フッターを一番下に維持する最善の方法を教えてください_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:50:371044ブラウズ
原文: Quick Tip: The Best Way To Make Sticky Footers
Web ページをレイアウトしているときに、次のような状況に遭遇することがあります。
この問題の原因は、ページのコンテンツが小さすぎてコンテンツ領域を拡張できず、フッターの下に大きな空白スペースが残ってしまうためです。
この記事では、フッターが常にページの下部に表示されるようにする最新の方法を紹介します。
解決策
この問題を解決する最良の方法は、CSS3 によって提供され、適応可能なレイアウトを構築するように設計された高度なレイアウト モデルであるフレックスボックスを使用することです。フレックスボックスにまだ慣れていない場合は、記事の最後にフレックスボックスの理解に役立つ参考資料のリンクがいくつかあります。
デモ ページにはヘッダー、メイン コンテンツ領域、フッターが必要です。以下はページの HTML です。
<body> <header>...</header> <section class="main-content">...</section> <footer>...</footer></body>
の順です。フレックス モードを有効にするには、本文の表示属性を flex に設定し、次に方向属性を列 (デフォルトは行、つまり水平レイアウト) に設定します。また、html 要素と body 要素の高さを 100% に設定して、画面全体に収まるようにします。
html{ height: 100%;}body{ display: flex; flex-direction: column; height: 100%;} 次に、各領域が占めるページ領域を調整する必要があります。これは、実際には 3 つの属性を含む flex 属性によって実現します。
- flex-grow: 同じコンテナ内の割り当て可能な領域に対する要素の割り当て率と拡張率
- flex-shrink: 領域が不十分な場合、要素の収縮率
- flex-basis: 要素の弾性ベース値
ヘッダーとフッターが占有すべきスペースのみを占有し、残りはすべて占有されることを望みます。メインコンテンツ領域にスペースが与えられます
header{ /* 我们希望 header 采用固定的高度，只占用必须的空间 */ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 0 0 auto;}.main-content{ /* 将 flex-grow 设置为1，该元素会占用所有的可使用空间 而其他元素该属性值为0，因此不会得到多余的空间*/ /* 1 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 1 0 auto;}footer{ /* 和 header 一样，footer 也采用固定高度*/ /* 0 flex-grow, 0 flex-shrink, auto flex-basis */ flex: 0 0 auto;} 最終的な効果は以下のようになります。中央のピンク色のボタンをクリックしてメインコンテンツを変更すると、フッターが常にページの下部に表示されます。
デモ ページのアドレス: http://demo.tutorialzine.com/2016/03/quick-tip-the-best-way-to-make-sticky-footers/ (を参照)効果を覆す必要があるかもしれません)
結論
あなたが言ったように、レイアウトを最初から構築する場合、flexbox はあなたの右腕のアシスタントになります。ごく一部の例外を除いて、すべての主要なブラウザはフレックスボックスをサポートしています。IE に関しては、IE9 以降のバージョンがサポートされています。
フレックスボックス レイアウト モデルを学習するための優れたチュートリアルとチートシートをいくつか紹介します
- CSS-Trick のフレックス ボックス クイック ガイド
- クールなフレックスボックス テクノロジーの提供に特化した Web サイトウェブサイト: Flexbox によって解決
- 5 分間の対話型チュートリアル