0

スティッキーフッターがdivに到達したら停止することを期待して微調整してきました#bodyが、これまでのところ成功していません. ほとんどの場合、通常はコンテンツをカバーしていませんが、このページではカバーしていることがよくあります。

可能であれば、ウィンドウの下部に貼り付けておきたいのですが、他に思いついた唯一の解決策は固定位置です。助言がありますか？

4

3 に答える 3

1

さて、固定位置/スティッキー フッターはさまざまな方法で適用できます。Twitter Bootstraps Sticky Footer exampleのように、1 つのオプションは CSS のみを使用することです。これはおそらく最も単純な実装です。

  /* The html and body elements cannot have any padding or margin. */
  html,body { height: 100%; }

  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
  }

  /* Set the fixed height of the footer here */
  #push,#footer{ height:100px }
  #footer {}
于 2013-04-28T05:27:54.577 に答える
0

Ryan Faitによると、ドキュメントの layout.css で次の CSS を使用できます。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em; /*-4em represents the height of the footer */
 }
 .footer, .push {
    height: 4em;
 }

次の HTML マークアップと同様に、実装が非常に簡単で、すべての主要なブラウザーで動作します。

<html>
<head>
    <link rel="stylesheet" href="layout.css" ... />
</head>
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Website Footer Here.</p>
    </div>
</body>
</html>

以前に実装したことがありますが、フッターをページの下部またはコンテンツの下部に固定するのに問題なく機能し、jquery や javascript はまったく必要ありません。

kurzweilguy のコメントに対応するために、プッシュにより、フッターを100%高さに配置できるようになります。これにより、ページが自然に拡張されてスクロール バーが表示されるため、それに対抗するために、負のマージンを付けて元に戻します。ページの下部に収まります。darcherが参照するフッターは、まったく同じフッターを使用します。とてもきれいにまとめられたフッターです！

于 2013-04-28T05:49:01.783 に答える
0

私はあなたの望む結果について確信が持てませんが、あなたが必要としているのは次のようなものかもしれません:

#footer {
  position: fixed;
  bottom: 0;
  left:0;
  right:0;
}
于 2013-04-28T05:15:17.030 に答える