ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況に遭遇することがよくあります。いずれにしても、下部に表示されず、見苦しいです。次に議論するレイアウトは、要素をブラウザの下部に張り付けるにはどうすればよいかという問題を解決するものです。 方法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: Javaデータベース接続、Oricalによって規定...
目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...
Linuxでタイムゾーンを変更する場合、常に変更することはできませんAsia/Shanghai に変...
Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...
追加するdocker run -it -name test -d nginx:latest /bin...
目次1. はじめに2. コードの実装2.1 目的分析2.2 実装プロセス2.2.1 エントリーコード...
概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...
今日は、いくつかの一般的なテキスト処理コマンドとvimテキストエディタを紹介します。 3日目 - 一...
この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...
目次1. コアコマンド2. 共通コマンド3. コアコマンドの詳細な説明3.1、ps補助3.2 トップ...
線形グラデーション 背景画像: linear-gradient(方向、開始色、中間色1、中間色2、....
目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...
この記事の例では、フォーム検証機能を実装するためのjsの具体的なコードを参考までに共有しています。具...
展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...
目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...