CSSページ下部固定を実現する8つの方法の詳細な説明

CSSページ下部固定を実現する8つの方法の詳細な説明

ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況に遭遇することがよくあります。いずれにしても、下部に表示されず、見苦しいです。次に議論するレイアウトは、要素をブラウザの下部に張り付けるにはどうすればよいかという問題を解決するものです。

方法1: 固定フッターの高さ + 絶対位置

html

<div class="dui-container">
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</div>

CS

.dui-コンテナ{
位置: 相対的;
最小高さ: 100%;
}
主要 {
パディング下部: 100px;
}
ヘッダー、フッター{
行の高さ: 100px;
高さ: 100px;
}
フッター{
幅: 100%;
位置: 絶対;
下: 0
}

効果を見る

方法2: メインコンテンツの下余白に、下の高さと同じ負の値を追加します。

html

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

CS

html、本文{
高さ: 100%;
}
主要 {
最小高さ: 100%;
パディング上部: 100px;
パディング下部: 100px;
上マージン: -100px;
下マージン: -100px;
}
ヘッダー、フッター{
行の高さ: 100px;
高さ: 100px;
}

効果を見る

方法3: フッターのmargin-topを負の数に設定する

html

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

CS

主要 {
最小高さ: 100%;
パディング上部: 100px;
パディング下部: 100px;
}
ヘッダー、フッター{
行の高さ: 100px;
高さ: 100px;
}
ヘッダ{
下マージン: -100px;
}
フッター{
上マージン: -100px;
}

効果を見る

方法4: flexを設定してフッターのmargin-topをautoに設定する

html

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

CS

体{
ディスプレイ: フレックス;
最小高さ: 100vh;
flex-direction: 列;
}
ヘッダー、フッター{
行の高さ: 100px;
高さ: 100px;
}
フッター{
上マージン: 自動;
}

効果を見る

方法5: calc()関数を使用してコンテンツの高さを計算する

HTMLコード

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

CSSコード

主要{
min-height: calc(100vh - 200px); /* この 200px はヘッダーとフッターの高さです */
}
ヘッダー、フッター{
高さ: 100px;
行の高さ: 100px;
}

効果を見る

方法6: flexboxを設定して本体をflexに設定する

html

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

CSSコード

体{
ディスプレイ: フレックス;
最小高さ: 100vh;
flex-direction: 列;
}
主要{
フレックス: 1
}

効果を見る

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

HTMLコード

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

CSSコード

html{
高さ: 100%;
}
体 {
最小高さ: 100%;
表示: グリッド;
グリッドテンプレート行: 自動 1fr 自動;
}
.フッター{
グリッド行開始: 3;
グリッド行の終了: 4;
}

効果を見る

方法8: display-*

html

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

CS

体 {
  最小高さ: 100%;
  表示: テーブル;
  幅: 100%;
}
主要 {
  表示: テーブル行;
  高さ: 100%;
}

効果を見る

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

>>:  HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

推薦する

JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要

まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...

データバインディングとリストデータの表示にはVue3を使用する

目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...

Linux環境でタイムゾーンを設定できない問題を解決

Linuxでタイムゾーンを変更する場合、常に変更することはできませんAsia/Shanghai に変...

docker エントリポイントファイルの詳細な説明

Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...

docker run後、ステータスは常にExitedになります

追加するdocker run -it -name test -d nginx:latest /bin...

Vueデータ双方向バインディング実装方法

目次1. はじめに2. コードの実装2.1 目的分析2.2 実装プロセス2.2.1 エントリーコード...

1 つの記事で Apache Avro データを解析する

概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...

Linux の一般的なテキスト処理コマンドと vim テキストエディタ

今日は、いくつかの一般的なテキスト処理コマンドとvimテキストエディタを紹介します。 3日目 - 一...

MySQL インデックスの原理と使用例の分析

この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...

Linux チェックアップ、Linux の状態 (ネットワーク IO、ディスク、CPU、メモリ) を把握

目次1. コアコマンド2. 共通コマンド3. コアコマンドの詳細な説明3.1、ps補助3.2 トップ...

CSS グラデーション効果の概要 (線形グラデーションと放射状グラデーション)

線形グラデーション 背景画像: linear-gradient(方向、開始色、中間色1、中間色2、....

Node.jsをゼロから学ぶ

目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...

jsはフォーム検証機能を実装します

この記事の例では、フォーム検証機能を実装するためのjsの具体的なコードを参考までに共有しています。具...

JavaScript 定期検証パスワード強度実装方法

展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...

MySQLクライアントとサーバーのプロトコルの解釈

目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...