ホームページ > 記事 > ウェブフロントエンド > フッターをページ下部に固定するCSS実践チュートリアル
フッターをページ下部に固定するCSS実践チュートリアル
- 高洛峰オリジナル
- 2017-03-10 11:05:131941ブラウズ
この記事では、ページ下部のフッターを修正する実際の CSS の実践を主に紹介します。CSS のクリアの問題に注意してください。必要な場合は、Web ページの
フッターの位置の問題
フッターを参照してください。 、通常、ここにヘルプ リンクと著作権情報が配置されます。フッターは当然ページの下部に配置されるべきですが、一般的な慣例によれば、フッターより前の Web ページのコンテンツが比較的小さい場合、または垂直解像度が高いモニターを使用している場合、フッターは表示されないことがあります。ページ下部の状況は以下の通りです。 
フッターを一番下に固定する方法絶対配置は可能ですか？
Web ページのコンテンツが小さい場合、フッターはページ全体の下部に配置され、残りは空白のままになります。
<body>
<p class="wrapper">
<!--网页内容-->
<p class="footer_placeholder"></p>
</p>
<p class="footer">
<!--页脚-->
</p>
</body>
p.wrapper は、フッターを除く Web ページ内のすべてのコンテンツの外部コンテナーであり、フッター p.footer はそれと同じレベルにあります。 p.footer_placeholder は、Web ページ上のすべてのコンテンツの最後、つまり p.wrapper の最後の子要素として配置する必要があります。その機能については後で説明します。 次にCSSを書いて順番に説明していきます。 html, body{height:100%;}
Webページの内容が不足している場合、実際のbodyやhtmlの高さはブラウザの表示範囲より小さくなる場合がありますので、bodyやhtmlの高さを100%で記述してください。さらに、次の直接の子要素でもパーセント書き込みメソッドが使用されます。パーセント書き込みメソッドは、直接の親要素に特定の高さの定義がある場合にのみ有効である必要があります。 .wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定页脚的高度为120px*/
}
すべての Web コンテンツは、最小の高さを定義するこの p.wrapper 内にあります (IE6 はハックを使用します)。この要素の親要素は、コンテンツの量に関係なく、100% の高さを定義する本体です。 、p.wrapper 要素の高さは、ブラウザーの表示範囲全体を占めます。次に、フッターがページ コンテンツの最後に正確に表示されるように、フッターの高さに応じて下マージンに等しい負の値を設定します。 .footer, .footer_placeholder{height:120px;} /*假定页脚的高度为120px*/
p.footer_placeholder、文字通り、フッターのプレースホルダー要素です。これは単なる空の p で、定義の高さはフッターと同じで、フッターのための場所を残すために存在します。これがないとこんなことが起こるかも知れません↓
html, body{height:100%;}
.wrapper{
min-height:100%;
_height:100%;
margin-bottom:-120px; /*假定页脚的高度为120px*/
}
.footer, .footer_placeholder{height:120px;}
如果还需要考虑css初始化和清理浮动，可能你还需要添加下面这部分css：
body{margin:0;}
.footer_placeholder{clear:both;}
以上がフッターをページ下部に固定するCSS実践チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。