ホームページ > 記事 > ウェブフロントエンド > CSSでフッターを実装する5つの方法の共有
スティッキー フッター とは、Web ページのフッター部分が常にブラウザ ウィンドウの下部にあることを意味します。
Web ページのコンテンツがブラウザーの表示高さを超えるほど長い場合、フッターはコンテンツとともに Web ページの下部に押し込まれます
ただし、Web ページのコンテンツがそうでない場合は、十分長い間、下部フッターはブラウザ ウィンドウの下部に残ります。
<a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a>content 部分 >
負の数に設定します<a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a>
设为负数<p class="wrapper"> <!-- content --> <p class="push"></p> </p> <p class="footer">footer</p>
html, body { margin: 0; padding: 0; height: 100%; } .wrapper { min-height: 100%; margin-bottom: -50px; /* 等于footer的高度 */ } .footer, .push { height: 50px; }
这个方法需要容器里有额外的占位元素(p.push
)。
p.wrapper
的margin-bottom
需要和p.footer
的-height
值一样,注意是负height
。
<a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>
设为负数给内容外增加父元素,并让内容部分的<a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a>
与页脚的height
相等。
<p class="content"> <p class="content-inside"> <!-- content --> </p> </p> <p class="footer">footer</p>
html, body { margin: 0; padding: 0; height: 100%; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; }
calc()
设置内容高度<p class="content"> <!-- content --> </p> <p class="footer">footer</p>
.content { min-height: calc(100vh - 70px); } .footer { height: 50px; }
这里假设p.content
和p.footer
<p class="content"> <!-- content --> </p> <p class="footer">footer</p>
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; }
p.push
) に追加のプレースホルダー要素が必要です。 )。 p.wrapper
の margin-bottom
には、p.footer
の -height
が必要です> value 同じですが、負の height
に注意してください。 <a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a> を変更する
負の数に設定します<a href="http://www%20.php.cn/wiki/951.html" target="_blank">padding-bottom</a>
は、フッターの height
と同じです。 🎜<p class="content"> <!-- content --> </p> <p class="footer">footer</p>
html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; }🎜方法 3:
calc()
を使用してコンテンツの高さを設定します🎜rrreeerrreeep.content と <code>p.footer
の間には 20px のギャップがあるため、70px=50px+20px🎜🎜🎜🎜方法 4: フレックスボックス レイアウトを使用する🎜🎜上記 3 つの方法のフッターの高さは、はい、フッターにコンテンツが多すぎると、レイアウトが崩れる可能性があります。 🎜rrreeerrreee🎜方法 5: グリッド レイアウトを使用する🎜rrreeerrreee🎜 🎜
以上がCSSでフッターを実装する5つの方法の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。