スティッキーフッターレイアウトとは何ですか? 一般的な Web ページのレイアウトは、通常、ヘッダー部分、コンテンツ部分、フッター部分に分かれています。ヘッダー領域とコンテンツ領域のコンテンツが小さい場合、フッター領域はコンテンツ領域と一緒に配置されず、常に画面の下部に表示されます。コンテンツ領域に大量のコンテンツが含まれている場合、フッターはドキュメントのフローに応じて拡張され、常にページの下部に表示されます。これは伝説的なスティッキーフッターレイアウトです。分かりやすいと思いませんか?わからなくても大丈夫です。簡単な例を挙げてみましょう。 一般的に、モバイル ページでは、コンテンツの高さが 1 画面に収まらない場合はフッターが画面の下部に近くなり、コンテンツの高さが 1 画面を超える場合はフッターがそれに従います。 方法1: フレックスボックスレイアウト
デモを見るにはクリックしてください: Flexbox レイアウトで固定フッターを実装します <div class="コンテナ"> <div class="content">コンテンツ</div> <div class="footer">フッター</div> </div> 体 { マージン: 0; } 。容器 { ディスプレイ: フレックス; flex-direction: 列; 最小高さ: 100vh; } 。コンテンツ { フレックス: 1; /*必須ではありません*/ 幅: 100%; 高さ: 300px; 行の高さ: 300px; テキスト配置: 中央; 色: #fff; フォントサイズ: 30px; フォントの太さ: 太字; 背景色: #71a8da; /*必須ではありません*/ } .フッター{ 高さ: 60px; /*必須ではありません*/ 幅: 100%; 行の高さ: 60px; テキスト配置: 中央; 色: #fff; フォントサイズ: 30px; フォントの太さ: 太字; 背景色: #f85f2f; /*必須ではありません*/ } 方法 2: padding-bottom + 負の margin-top
デモを見るにはクリックしてください: padding-bottom + negative margin-top で固定フッターを実現 <div class="wrapper"> <div class="content">コンテンツ</div> </div> <div class="footer">フッター</div> 体 { マージン: 0; } .ラッパー{ 幅: 100%; 最小高さ: 100vh; } 。コンテンツ { /*padding-bottom はフッターの高さと同じである必要があります*/ パディング下部: 60px; /*必須ではありません*/ 幅: 100%; 高さ: 400px; 行の高さ: 400px; テキスト配置: 中央; 色: #fff; フォントサイズ: 30px; フォントの太さ: 太字; 背景色: #71a8da; /*必須ではありません*/ } .フッター{ /*margin-top はフッターの高さの負の値と同じである必要があります*/ 上マージン: -60px; 高さ: 60px; /*必須ではありません*/ 幅: 100%; 行の高さ: 60px; テキスト配置: 中央; 色: #fff; フォントサイズ: 30px; フォントの太さ: 太字; 背景色: #f85f2f; /*必須ではありません*/ } ヒント: 2 つの クラシック CSS スティッキー フッター レイアウトの実装に関するこの記事はこれで終わりです。CSS スティッキー フッターに関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 |
>>: vue3 学習ノートにおける axios の使用の変更の概要
序文Nginx はパフォーマンスを重視して設計された HTTP サーバーです。Apache や li...
CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...
usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...
場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...
目次背景探検する要約する背景テーブルでは、dataTime フィールドは varchar 型に設定さ...
この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...
1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...
https ベースポート 443。これはキーと呼ばれるものに使用されます。これらのことを理解せずにで...
目次1. はじめに2. シンプルなepollの例2.1、epoll_create 2.2、構造体イベ...
この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。...
データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...
アクセス数が増えると、MySQL データベースへの負荷が増大します。MySQL アーキテクチャを使用...
序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...
1. PVとIPの統計一日のPV(ページビュー)をカウントする cat access.log | ...
ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...