1

CSSの配置ガイドラインに頭を悩ませようとしています。粘着性のあるフッターを作成する方法を見つけようとしていますが、メイン コンテンツ領域が圧縮できなくなったときに粘着性を停止します。私が話していることの例は、ここhttp://ryanfait.com/sticky-footer/にあります。なぜフッターが固定されなくなったのか、特にどの CSS プロパティが原因なのか説明してもらえますか? 私の場合、CSS を見ると、フッターは常にブラウザー ウィンドウの下部に固定されているように見えますが、ここではそうではありません。なんで？

助けてくれてありがとう。

4

3 に答える 3

1

これを試してみてください。 http://www.cssstickyfooter.com/（リンクは無効になりました）

ライアンのものと似ていますが、記憶から、私はこれで運が良かったと思います（両方とも非常に似ていますが）。

于 2011-08-03T05:20:41.850 に答える
0

ラッパーの外側でフッターを宣言し、heightフッターとマージンの一部を指定する必要があります。-(footer-height)px 

<div id="wrapper">
  ---
 ------
</div>
<div id="footer">
</div>

# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
于 2011-08-03T04:39:07.750 に答える
0

これは、スティッキーフッターを必要とするプロジェクトの基礎として私がかなり一貫して使用しているレイアウトの簡単な要約です。最初にすべてのコードをどこから入手したかはわかりませんが、かなりの期間にわたってまとめられました。

http://jsfiddle.net/biznuge/thbuf/8/

ページ全体をラップする「#container」要素が必要であることがフィドルからわかるはずです。これにより、100％の高さが得られ（つまり、cssに存在するハックに注意してください）、この「コンテナ」要素の子要素が高さ、つまり相対的な位置を取得できるようになります。

この方法の落とし穴は次のとおりです。

  • '#main'要素の下部にパディング/マージンを指定して、フッターが自然に移動するよりも遠くに移動するようにする必要があります。そのため、フッターの高さを少なくとも広範囲にわたって知る必要があります。
  • ブラウザーの下端のみのサイズを変更した場合、IEはブラウザーのサイズ変更イベントを認識しないようです（<= IE8はテストされていません9）。そのため、特定の場合、水平方向のサイズ変更もイベントとして表示されるまで、スティッキネスは失敗します。
  • レイアウトに固定幅が必要な場合は、この制約を「#container」要素ではなく「#page」要素に配置し、「＃footer」の下に追加の要素を導入して幅の制約を提供する必要があります。

幸運を！

于 2011-08-03T11:23:37.300 に答える