ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS はページの下部にフッターを保持します_html/css_WEB-ITnose
CSS はページの下部にフッターを保持します_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:111059ブラウズ
注文: ページの下部にフッターを保持したい場合 (ページ コンテンツの高さがウィンドウの高さより低い場合でも)、次の方法を試すことができます。
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>CSS让footer保持在页面底部</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; /*让页面撑满窗口*/ } .body { min-height: 100%; height: auto !important; height: 100%; /*设置页面内容区域最小占满窗口高度*/ margin: 0 0 -41px; /*利用margin负值留出footer的区域(由于footer设置了1px的border，所以值在原有高度上+1)*/ text-align: center; } footer { height: 40px; line-height: 40px; border-top: 1px solid #ddd; text-align: center; } </style></head><body> <div class="body"> <header>我是头部</header> <div>我是内容</div> </div> <footer>我是页脚，我总是固定在页面底部</footer></body></html>
著者: @zhnoah
出典:
この記事の著作権は私とブログパークに属します。ただし、この声明は著者の同意なしに保持され、原文へのリンクが提供されなければなりません。そうでない場合、当社は法的責任を追及する権利を留保します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。