-1

この記事に基づいて、自分のプロジェクトでスティッキーフッターを作成したいと思います。このリンクをご覧ください。

なぜ垂直スクロールバーが表示されるのか、なぜ#pagedivが下にあるのか理解できません#footer

4

2 に答える 2

4

フッターには1pxのボーダートップがあります。コンテナには1pxの境界線があります。ナビゲーションにはマージントップがあります...これらはすべて垂直方向の高さに影響するため、全体の高さは100％以上にプッシュされます=>垂直スクロールバー。

余分なピクセルをオフセットするようにパディング/マージンを設定するときは、それを考慮する必要があります。さらに、フッター要素のパディング/マージンを指定します。あなたがすべきことは、フッター要素をラッパーとして使用し、適切なパディング/マージンを使用してその中に要素を作成することです。

これがあなたがそれを機能させる方法です...

1#navスタイルをパディングに変更：padding: 10px 0 0 0;

2あなたの1pxの境界線を取り除きます#container

3フッターをこれに変更します...

<div id="footer">
  <div id="footer-content">
    © 2012 Code Arts
  </div>
</div>

4フッターcssを次のように変更します。

#footer {
  border-top: 1px solid #C9E0ED;
  height: 53px; /* 20px padding-top + 20px padding-bottom + 13px line-height */
  margin-top: -54px; /* height + 1px border-top */
  position: relative;
  clear: both;
}
#footer-content {
  font-size: 13px;
  line-height: 13px;
  text-align: center;
}
于 2012-11-14T20:32:54.407 に答える
0

これを試して：

z-index: 2;

...＃footerで。

また、世界で何がマージントップであるか：-32767px; することになっている！？

于 2012-11-14T20:30:43.740 に答える