9

フッターが常に画面に表示され、フロートするサイトのデザインが欲しいです。ユーザーが下にスクロールすると、フッターが一緒に移動します。私はそのアイデアに自分自身を売り込んでいません - しかし、それは私が企業のものにリンクしたいと思う場所です. これが悪い考えである場合は、制限を教えてください (おそらくモバイルで?)。

ページの下部にフッターがあるデザインや例を見たことがありますが、それが「スクロールしなければ見えない位置」にある場合、ユーザーはそれを見るために下にスクロールする必要があります。良くない。

これがどのように達成されるかについて誰かが私に基本を提供できますか?

前もって感謝します。

4

1 に答える 1

15

ブートストラップには、あなたが望むことをするクラスがあります: .navbar-fixed-bottom. カスタム CSS は必要ないため、そのクラスを使用する方が適切なソリューションです。

ただし、カスタム CSS を使用したい場合は、次の方法があります。フッター要素の ID が「フッター」であると仮定します。

#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}

また、ユーザーがページの一番下までスクロールしたときに、フッターが最下部のコンテンツを欲しがってはならないことを確認する必要があります。これを回避する最も簡単な解決策は、body 要素にフッターの高さと同じ量の下余白を追加することです。フッター要素の高さが 100px であると仮定すると、次のコードを使用できます。

body {
  margin-bottom: 100px;
}

ただし、特にレスポンシブ レイアウトではフッターの高さが変わる可能性があるため、フッターのオーバーラップを回避するには、jQuery を使用して、画面サイズの変更時に本文の下マージンを更新する必要があります。

于 2013-09-27T22:19:21.923 に答える