ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況に遭遇することがよくあります。いずれにしても、下部に表示されず、見苦しいです。次に議論するレイアウトは、要素をブラウザの下部に張り付けるにはどうすればよいかという問題を解決するものです。 方法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タグを慎重に使用してください
スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...
Mavenパッケージを解凍する tar xf apache-maven-3.5.4-bin.tar....
MySQL 5.7.x の最新バージョンをダウンロードしてインストールしました。デフォルトでは、on...
Linux CentOS 7.7 システムを Vmware にインストールする方法。最小限のインスト...
背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...
1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...
IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....
この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は...
目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...
login.html 部分: <!DOCTYPE html> <html lang...
概要この記事では、ゲームクライアントでよく使用される MVC アーキテクチャについて紹介します。ゲー...
テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...
達成される効果:マウスを小さな画像の上に置くと、小さなブロックが小さな画像の上に表示され、この小さな...
この記事はGitHub https://github.com/qq449245884/xiaozhi...
目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...