スティッキーフッターレイアウトとは何ですか? 一般的な 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 の使用の変更の概要
1. CSS 方法論とは何ですか? CSS methodologiesデザイン パターンまたは CS...
レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...
Vue スキャフォールディングでは、エントリ ファイル main.js の新しい Vue コードに、...
Linux環境で、特定のソフトウェア(パッケージ)がインストールされているかどうかを確認したい。 r...
目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...
<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...
目次1. はじめに2. 製品テーブルを準備する2.1 ステートメントの順序2.2 大文字と小文字の区...
イメージは hub.docker.com に保存できますが、ネットワーク速度が比較的遅いです。内部環...
目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...
<br />このセクションでは、XHTML でテキストの書式設定と特殊文字を実装する方法...
達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...
最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...
詳細には立ち入らずに、コードに直接進みましょう。一緒にコミュニケーションを取り、学びましょう。月ごと...
目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...