スティッキーフッターの解決策のまとめ-CSSチュートリアル-php.cn

スティッキーフッターの解決策のまとめ

小云云

リリース： 2018-02-07 09:16:51

オリジナル

1843 人が閲覧しました

スティッキーフッターのデザインは、最も古く、最も一般的な効果の 1 つであり、ページのコンテンツの長さが十分でない場合、フッターブロックが下部に貼り付けられ、コンテンツが十分な長さの場合はフッターブロックが押し込まれることを誰もが経験しています。内容によって異なります。この記事では、スティッキーフッターに関する 3 つの解決策に関する関連情報を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

最近は vue+express を練習していますが、Huang Yi 先生とスティッキーフッターについて詳しく学びました。しかし、今日は前の 2 日間の問題の解決策の詳細が少し曖昧です。、だから記録しておいたほうがいいですよ！教育への道はこのように、継続的な積み重ねと繰り返しです。

上の図の下部にある x は、単一ページのコンテンツで十分な場合は下に押し込まれます。画面全体では、下部に固定されます。 x 就用到了经典的stricky footer，单页面内容足够时，它会向下推送；当页面内容没有撑满整个屏幕时，它就固定在底部。

而不是像下图这样：

问题

如果此前不知道stricky footer，使用fixed固定在底部的话，像下图这样

position: fixed;
width: 32px;
height: 32px;
bottom: 20px;
left: calc(50% - 16px);
font-size: 32px;

ログイン後にコピー

那样 x

下の写真の代わりに:

< p style="max-width:90%">質問

スティッキーフッターについてよくわからない場合は、下の図のように、fixed を使用して下部に固定してください

<body>
  <p class="content"></p>
  <p class="footer"></p>
</body>

ログイン後にコピー

そうすれば、 x がコンテンツを上書きします。これは明らかに実用的ではなく、要件を満たしておらず、美しくもありません。

そのため、古典的なスティッキーフッターは広く使用されており、多くの状況に適用できます。数日前に行った最初のプロジェクトを確認したところ、多くの場所に適用できることがわかりました。

ソリューション

スティッキーフッター主なソリューションは 3 つあり、少し簡単なコードを構築します

.content{
  min-height:calc(100vh - `footer的高度`);
  box-sizing:border-box;
}

ログイン後にコピー

1. コンテンツ領域に最小の高さを追加します

このメソッドは主にビューポート vh を使用します。ビューウィンドウ全体の高さから、下部フッターの高さを減算して、コンテンツ領域の最小の高さを取得します

body{
  display:flex;
  flex-flow:column;
  min-height:100vh;
}
.content{
  flex:1;
}
.footer{
  flex:0;
}

ログイン後にコピー

この方法は非常に簡単ですが、ページのフッターの高さが異なる場合、各ページ再計算する必要があるため、お勧めできません

2. フレックスレイアウトを使用する

フレックスレイアウトは、現在モバイルレイアウトで世界を占め、広く使用されています。

通常、フレックスレイアウトを使用してウィンドウの幅を分割し、一方の側は固定幅、もう一方の側は適応幅を持ちます。同様に、フレックスレイアウトでは、フッターのフレックスが 0 であるため、コンテンツの固有の高さが 1 になるように、当然ながら分割することもできます。このようにして、フッター以外の部分が埋め込まれます

<body>
  <p class="content-wrapper clearfix">
    <p class="content"></p>
  </p>
  <p class="footer"></p>
</body>

ログイン後にコピー

この方法の方がおすすめです

🎜3.コンテンツの外側にラッパーレイヤーを追加します🎜🎜🎜この方法は、Huang先生も使用している方法ですはい、コンテンツ内に外側にラッパーレイヤーを追加します🎜🎜🎜🎜

html,body,.content-wrapper{
  height:100%
}
body > .content-wrapper{
  height:auto;
  min-height:100%;
}
.content{
  padding-bottom:150px //与footer的高度相同
}
.footer{
  position:relative;
  margin-top:-150px; // -`footer高度`
  height:150px;
  clear:both;
}
.clearfix{
  display:inline-block;
}
.clearfix{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility: hidden;
}

ログイン後にコピー

🎜互換性を確保するために、通常はラッパーレイヤーにclearfixクラスを追加します🎜🎜🎜🎜rrreee🎜これでスティッキーフッターが完成します。これも比較的単純で推奨されますが、多くのコードが追加され、HTML 構造が変更されます。 🎜

以上がスティッキーフッターの解決策のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。