CSS を使用してフッターの配置を実装する 5 つの方法の紹介

この記事では主に、フッターの底付けを実装するための 5 つの CSS メソッドの詳細な説明を紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターに従って、見てみましょう。スティッキー フッターとは、Web ページのフッター部分が常にブラウザー ウィンドウの下部にあることを意味します。

Web ページのコンテンツがブラウザーの表示高さを超えるほど長い場合、フッターはコンテンツとともに Web ページの下部に押し込まれますが、Web ページのコンテンツが十分な長さでない場合は、の場合、下部のフッターはブラウザ ウィンドウの下部に残ります。

方法 1: コンテンツ部分の margin-bottom を負の数に設定します

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

1. このメソッドには次のものが必要ですコンテナあります余分なスペース要素(p.push)。

2. p.wrapper の margin-bottom は、p.footer の -height 値と同じである必要があります。これは負の高さであることに注意してください。

方法 2: フッターの margin-top を負の数に設定しますコンテンツの外側に親要素を追加し、コンテンツ部分のpadding-bottom をフッターの高さと同じにします。

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

方法 3: calc() を使用してコンテンツの高さを設定します

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

これは次のことを前提としていますp.コンテンツとp.footerの間には20pxの隙間があるため、70px=50px+20px

方法4: flexboxフレキシブルボックスレイアウトを使用する上記の3つの方法のフッターの高さは固定です。フッターの内容が多すぎるとレイアウトが崩れる可能性があります。

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

方法 5: グリッドグリッドレイアウトを使用する

<p class="content">
  <!-- content -->
</p>
<p class="footer">footer</p>

りー

以上がCSS を使用してフッターの配置を実装する 5 つの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。