Sticky Footer 絶対最下位メソッド

今回はSticky Footerの絶対最下位を実現する方法をお届けします。Sticky Footerの絶対最下位を実現するための注意点を紹介します。

私は最近、さまざまなレベルの仕事経験を持つ数人のフロントエンド開発者にインタビューしましたが、絶対的な底辺が何なのかさえわかりませんし、それを達成する方法を誰も教えてくれません。フロントエンド分野には良いことも悪いことも混在しているということです

絶対最下位、またはスティッキーフッターは古くて古典的なページ効果です:

ページコンテンツが画面を超えると、フッターモジュールは画面の下に押し込まれます。コンテンツは通常のページと同様で、表示するにはスクロール バーをドラッグする必要があります

そして、ページのコンテンツが画面の高さより小さい場合、フッター モジュールは固定ページと同じように画面の下部に固定されます下マージンゼロでの配置

1. 古典的なルーチン

このルーチンのアイデアは、コンテンツ領域に Set min-height: 100% を与え、フッターを下部に押し込むことです。画面

を作成し、フッターにmargin-topを追加します。その値はフッターの高さの負の値であり、フッターが画面の下部に戻ることができます

HTML:

<p class="wrap">
  <p class="content">
    <p>填充内容</p>
  </p>
</p>
<p class="footer">
  <p>这是页脚</p>
</p>

CSS:

html,body {
  height: 100%;
}
    
body > .wrap {
  min-height: 100%;
}
    
.content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 60px;
}
    
.footer {
  width: 100%;
  height: 60px;
  /* margin-top 为 footer 高度的负值 */
  margin-top: -60px;
}

注意する必要があるのは、コンテンツ領域のパディング、フッターの高さとマージンであり、一貫性が必要です

この書き方の互換性は非常に高く、IE7でも表示できることがテストされています通常は

しかし、ページの本体に他の互換性の問題がある場合、スティッキーフッターはそれに対応する修正を行う必要があります

2. フレックスボックス

CSS3は、CSS3が変更をもたらしたと言わなければなりませんFlexbox は Web ページのレイアウトに変化をもたらしました

互換性により中国での Flexbox の推進は制限されていますが、Flexbox がフロントエンド レイアウトの主要なトレンドであることは否定できません

HTML:

<p class="content">
  <p>填充内容</p>
  <hr />
</p>
<p class="footer">
  <p>这是页脚@WiseWrong</p>
</p>

CSS :

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}
body > .content {
  flex: 1;
}

古典的なルーチンと比較すると、最初は HTML 部分であり、コンテンツ領域のコンテンツにはラップ コンテナーが必要なくなりました

その後、CSS 部分が 4 行のコードのみで削減され、かつて問題になっていた問題が解決されました。そして、Flexbox を使用すると、フッターの高さを制限する必要がなくなり、ページ レイアウト

がより柔軟になります

もちろん、欠点も明らかですが、フレックス レイアウト をサポートしているのは IE10 以上のブラウザーのみです。この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フォトウォールで3D効果を実現するための純粋なCSS

ファンパターンを描画するためのCSS

以上がSticky Footer 絶対最下位メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。