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タグを慎重に使用してください

推薦する

25 個の CSS フレームワーク、ツール、ソフトウェア、テンプレートを共有

スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...

Linux 継続的インテグレーションで Maven を自動的にインストールする方法

Mavenパッケージを解凍する tar xf apache-maven-3.5.4-bin.tar....

MySQL が group by をサポートしない場合の解決策の概要

MySQL 5.7.x の最新バージョンをダウンロードしてインストールしました。デフォルトでは、on...

Linux CentOS 7.7 システムの VMware インストールに関する詳細なチュートリアル

Linux CentOS 7.7 システムを Vmware にインストールする方法。最小限のインスト...

Linux クラウド サーバーに新しいディスクをマウントする方法

背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...

Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード

1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...

nginxを使用して取得したIPアドレスが127.0.0.1である問題を解決する

IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....

ネイティブ JS でスネーク ゲームを書く

この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は...

Vue シングルページ SEO の 4 つのソリューションについての簡単な説明

目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...

CocosCreator MVCアーキテクチャの詳細な説明

概要この記事では、ゲームクライアントでよく使用される MVC アーキテクチャについて紹介します。ゲー...

ネイティブ CSS で無限テキストカルーセルを実装する一般的な方法

テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...

JavaScript で虫眼鏡の特殊効果を実現

達成される効果:マウスを小さな画像の上に置くと、小さなブロックが小さな画像の上に表示され、この小さな...

CSSのさまざまな背景、使用シナリオ、テクニックの詳細な分析

この記事はGitHub https://github.com/qq449245884/xiaozhi...

Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現

目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...