ブートストラップスティッキーフッター効果_JavaScript スキル-jsチュートリアル-php.cn

ブートストラップスティッキーフッター効果_JavaScript スキル

WBOY

リリース： 2016-05-16 15:07:49

オリジナル

1235 人が閲覧しました

スティッキーフッターをブートストラップします。より具体的に言うと、「固定高さのフッターをページの下部に貼り付ける」ことです。プロジェクトの実際の状況はテンプレートとは異なるため、編集者はテンプレートを参照して「スティッキーフッター」効果をすぐに完了できるかどうかを保証できません。その場合は、このチュートリアルを共有したいと思います。よく書かれています、許してください！

1. ページ効果

ブートストラップスティッキーフッター効果_JavaScript スキル

ページは非常にシンプルです。明るい線は Firefox の端であり、フッターの灰色の部分がページの下部に埋め込まれていることがわかります。

2. 例

①、コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link type="text/css" rel="stylesheet" href="/ymeng/components/bootstrap/css/bootstrap.css" />
<style type="text/css">
html,body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
margin: 0 auto -200px;
}
#push
height: 200px;
}
.footer {
border-top: 1px solid #e5e5e5;
color: #777;
padding: 19px 0;
background-color: #f5f5f5;
}
</style>
<head>
<title>发布项目</title>
</head>
<body>
<div id="wrap">
<div class=" container project_choose">
<div class="row">
<div class="col-md-5 project_general">
<span class="f14">我有一个梦想，有创意项目，有创意产品，点击发布回报</span>
<div class="blank20"></div>
<div>
<a type="button" class="btn btn-danger" href="/ymeng/deal/initDealCaluseConfirm">立即发布产品</a>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-5 project_agency">
<span class="f14">我有创业梦想，有融资需求，点击发布股权</span>
<div class="blank20"></div>
<div>
<button type="button" class="btn btn-primary">立即发股权</button>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div class="footer ">
<div class="container">
<div class="row footer-top">
<div class="col-sm-6 col-lg-6">
<h4></h4>
<p>欢迎你加入，这里有你想要的.</p>
</div>
<div class="col-sm-6 col-lg-5 col-lg-offset-1">
<div class="row about">
<div class="col-xs-3">
<h4>关于</h4>
<ul class="list-unstyled">
<li>
<a href="">关于我们</a>
</li>
</ul>
</div>
<div class="col-xs-3">
<h4>联系方式</h4>
<ul class="list-unstyled">
<li>
<a target="_blank" title="云梦网官方微博" href="">新浪微博</a>
</li>
<li>
<a href="">电子邮件</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="row footer-bottom">
<ul class="list-inline text-center">
<li>Copyright &copy;2016. n 洛阳限公司 Software All Rights Reserved.</li>
</ul>
</div>
</div>
</div>
</body>
</html>

ログイン後にコピー

②、ページ本文のレイアウト

<body>
<div id="wrap">
<div class=" container">
</div>
<div id="push"></div>
</div>
<div class="footer ">
</div>
</body>

ログイン後にコピー

body の最初のレベルの要素、2 つの div、ラップとフッター

第 2 レベルの要素には、コンテナーとプッシュという 2 つの div があります (この div をプッシュするのを忘れると、スケーリング時にページがめちゃくちゃになります)

ブートストラップスティッキーフッター効果_JavaScript スキル

上記の要素は、自然なスティッキーフッターに不可欠です。

③、CSS解析

html,body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
margin: 0 auto -200px;
}
#push
height: 200px;
}
.footer {
border-top: 1px solid #e5e5e5;
color: #777;
padding: 19px 0;
background-color: #f5f5f5;
}

ログイン後にコピー

HTML と本文の高さは 100% である必要があります。これは、ブラウザウィンドウの高さを満たすことを意味します

#wrap div の最小高さは 100% である必要があり、高さは自動的に調整されます。

重要なポイントはマージンで、上のマージンは 0、下のマージンは -200px です。

理論的にはフッターの高さの負の数である -200px であることに注意してください (最適な高さは firebug を通じてデバッグできます)。これも重要です。なぜ負の数なのでしょうか?ワープの高さは元々 100% であるため、負の数値の場合はフッターを表示するために全高を残すことができます。そうでない場合、フッターはページスクロールバーの下部に表示されます。

#push要素ページ全体が表示されているとpush要素の機能が見えないように見えますが、ページを拡大するとpushがないとフッター要素が重なってしまいます。コンテナについては、前の図でも説明しましたが、その具体的な役割は何でしょうか。

ブートストラップスティッキーフッター効果_JavaScript スキル