Sticky Footer の絶対下位の 2 つのルーチンの詳細な説明-CSSチュートリアル-php.cn

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

小云云

リリース： 2017-12-23 13:09:57

オリジナル

2027 人が閲覧しました

この記事では、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 以降のブラウザーのみであることも明らかです