CSS を使用してフッターを下部に配置する 5 つの方法-CSSチュートリアル-php.cn

CSS を使用してフッターを下部に配置する 5 つの方法

高洛峰

リリース： 2017-03-16 17:43:10

オリジナル

2280 人が閲覧しました

スティッキーフッターとは、Web ページのフッター部分が常にブラウザーウィンドウの下部にあることを意味します。

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

CSS を使用してフッターを下部に配置する 5 つの方法

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

<p>
    <!-- content -->
    </p><p></p>

<p>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 値と同じである必要があります。これは負の高さであることに注意してください。

方法 2: フッターの margin-top を負の数に設定します

コンテンツの外側に親要素を追加し、コンテンツ部分のpadding-bottom をフッターの高さと同じにします。

<p>
  </p><p>
    <!-- content -->
  </p>

<p>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>
  <!-- content -->
</p>
<p>footer</p>

ログイン後にコピー

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

ログイン後にコピー

p.content と p.footer の間には 20px のギャップがあると想定されているため、70px=50px+20px

方法4: Flexboxレイアウトを使用する

上記3つの方法ではフッターの高さが固定されており、フッターの内容が多すぎるとレイアウトが崩れる可能性があります。

<p>
  <!-- content -->
</p>
<p>footer</p>

ログイン後にコピー

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

ログイン後にコピー

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

<p>
  <!-- content -->
</p>
<p>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;
}

ログイン後にコピー

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