スティッキーフッターのレイアウトは何ですか?

スティッキーフッターのレイアウトは何ですか?

私たちが目にするほとんどのウェブサイトのページは、ページをヘッダー ブロック、コンテンツ ブロック、フッター ブロックに分割しています。ヘッダー ブロックとコンテンツ ブロックのコンテンツが少ない場合は、フッターを画面の下部に固定することができます。文書の流れに従ってください。ページ上に多くのコンテンツがある場合、フッターはドキュメントの流れに合わせて自動的に拡張され、ページの下部に表示されます。これがスティッキー フッター レイアウトです。

イラスト

• コンテンツが小さい場合、通常のドキュメントフローの効果は以下のようになります

通常のドキュメントフローでは、ページコンテンツが小さい場合、フッター部分は固定されません。ウィンドウの下部 はい、Stickyfooter レイアウトが使用されます。

• スティッキーフッターのレイアウト効果は以下のとおりです

これは、私たちが期待した効果と一致しています。これは、スティッキーフッターレイアウトの適用シナリオが依然として非常に広範囲であることがわかります。

実装方法

ネガティブマージンレイアウト方法

htmlコード：

<div class="wrapper clearfix"><div class="content">  // 这里是页面内容</div>  </div><div class="footer">// 这里是footer的内容</div>

cssコード：

.wrapper {min-height: 100%;}.wrapper .content{padding-bottom: 50px; /* footer区块的高度 */}.footer {position: relative;margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */height: 50px;clear: both;}.clearfix::after {display: block;content: ".";height: 0;clear: both;visibility: hidden;}

注：content要素のpadding-bottom</code > の場合、<code>footer 要素の高さと footer 要素の margin-top 値は一貫している必要があります。 content元素的padding-bottom、footer元素的高度以及footer元素的margin-top值必须要保持一致。

这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer

このネガティブ マージン レイアウト方法は、最も互換性のあるレイアウト スキームであり、すべての主要なブラウザーと完全に互換性があり、さまざまなシナリオに適しています。ただし、この方法を使用するための前提条件は、footer 要素の構造は比較的複雑です。

フレックスレイアウト方法

html code:

<div class="wrapper"><div class="content">这里是主要内容</div><div class="footer">这是页脚区块</div>  </div>

css code:

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

このレイアウト方法は構造がシンプルでコードも少なく、よりお勧めのレイアウト方法でもあります。

概要

スティッキー フッター レイアウトは非常に一般的なページ レイアウト フォームであり、それを実装する方法は数多くあります。上記の 2 つの方法が最も一般的に使用されており、基本的にすべてのアプリケーション シナリオに対応できます。 🎜

以上がスティッキーフッターのレイアウトは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。