html - CSS フッターの分離

Question

ページに固定フッターがあります。フッターはテキストで構成され、背景画像はありません。右下に固定された背景画像もあります。ページを下にスクロールするときに、コンテンツがフッターと背景画像の両方と重ならないようにするにはどうすればよいかを考えていました。スクロール中にそれらの間にパディングを配置する方法はありますか?

Answer 1

フッターの高さのパディングボトムをメインコンテナに配置できます。このようなもの：

.footer { height: 150px; }
.container { padding-bottom: 150px; }

これにより、コンテンツが固定フッターの下に表示されなくなります。

編集: ここにフィドルがあります - http://jsfiddle.net/2KZyv/ ページの下部に到達すると、コンテナーの下部パディングのおかげで、フッターがコンテンツの上に表示されません。

Answer 2

フッターに白い背景を使用できます。透明な固定フッターを使用すると、オーバーラップの問題が発生する可能性があります。右下の背景画像については、z-indexコードを含めて奥まで押し込むだけで、すべてが上部に表示されます。