0

「固定フッター ブロック (FF_BLOCK)」、一部のコンテンツ、および「背景画像ブロック (BG_BLOCK)」(一部のコンテンツも含む) を含む Web サイトのテンプレートを作成しています。

コンテンツが少ない場合は、BG_BLOCK を FF_BLOCK の真上に配置します (位置: 固定、下: 0px)。FF_BLOCK と BG_BLOCK の間にギャップは絶対に必要ありません。

コンテンツ（およびスクロールバー）が多い場合は、BG_BLOCK をそのまま表示できます。

これは HTML + CSS のみで可能ですか、それとも JS の使用は避けられませんか?

現在の HTML

<div id="navigation">...</div>
<div id="content">...</div>
<div id="BG_BLOCK">...</div>
<div id="FF_BLOCK">...</div>

現在の CSS

#BG_BLOCK {
background: url(../images/background.jpg) repeat-x top center;
height: 380px;
padding-top: 467px;
margin-top: -347px;
}

#FF_BLOCK {
position: fixed;
bottom: 0px;
}

この画像を参照してください。ここに画像の説明を入力

4

2 に答える 2

2

試しましたmin-heightか？

BG_BLOCK {
    min-height: 100%;
}

背景画像は十分な大きさだと思います。そうでない場合は、background-size: coverまたはを使用background-size: auto 100%して画面全体を埋めます。

于 2013-04-03T15:33:15.637 に答える
0

FF_BLOCK を宣言しました (位置: 固定)。これで、FF_BLOCK がページの通常のフローから削除されました。min-height を固定以外の位置で使用します。

于 2013-04-03T15:40:59.570 に答える