ホームページ > 記事 > ウェブフロントエンド > フッターの位置_html/css_WEB-ITnose
フッターの位置_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:08:181107ブラウズ
ページのコンテンツの高さが十分ではないが、フッターをページの下部に配置したい場合があります。良い解決策を見つけたので共有したいと思います。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <style type="text/css"> * { margin: 0px; padding: 0px; } html, body { height: 100%; } </style></head><body> <div style="width: 100%; margin-bottom: -100px; background: #aa8; min-height: 100%;height: auto !important; height: 100%;"> <h1>Hello World</h1> <div id="push" style="height: 100px;"></div> </div> <div id="footer" style="height: 100px; width: 100%; background: #fff;"> this is the footer </div></body></html>
ディスカッションに返信（解決策）
オリジナル CSS スタイル
/* sticky footer------------------------------*/* { margin: 0;}html, body { height: 100%;} .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -267px; /* the bottom margin is the negative value of the footer's height */}.footer, .push { height: 267px; /* .push must be the same height as .footer */} 共有をサポート
共有してくれてありがとう
共有は素晴らしいです!
共有をサポートします!!
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。