HTML和CSS：沒有滾動條時固定位置

Question

我正在制作一個帶有“固定頁腳塊（FF_BLOCK）”的網站模板，一些內容和一個“背景圖像塊（BG_BLOCK）”（也有一些內容）。

當內容不多時，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;
}

看這個圖片：

Answer 1

你有沒有嘗試過min-height ：？

BG_BLOCK {
    min-height: 100%;
}

我假設背景圖像足夠大。 如果沒有，請使用background-size: cover或background-size: auto 100%來填充整個屏幕。

Answer 2

你已經宣布FF_BLOCK（位置​​：固定）。 因為你的FF_BLOCK已經從正常的頁面流中刪除了。 使用最小高度與其他定位，然后固定。