Sticky Footer の絶対下位の 2 つのルーチンの詳細な説明

この記事では、Sticky Footer の絶対的な底部を詳しく説明する 2 つのルーチンを主に紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

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

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

1. クラシックルーチン

このルーチンのアイデアは、コンテンツ領域に 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でも正常に動作します

ただし、ページのメインレイアウトに他の互換性の問題がある場合は、 , Sticky Footer は対応する変更をいくつか行う必要があります

2. Flexbox

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

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

その後、CSS 部分はわずか 4 行のコードで軽量化に成功し、かつては問題を抱えていた問題が解決されました

そして、Flexbox を使用すると、フッターの高さを制限する必要がないため、ページ レイアウトがより柔軟になります

もちろん、フレックス レイアウトをサポートしているのは IE10 以降のブラウザーのみであることも明らかです

関連する推奨事項:

CSS は絶対位置を配置します。 DIVの下部_html/css_WEB-ITnose

フッターの下部を修正する方法

JavaScriptを使用してスクロールバーを下部に判定する方法コード例詳細解説

以上がSticky Footer の絶対下位の 2 つのルーチンの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。