javascript - 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 已从正常的页面流中删除。使用最小高度和其他一些定位，然后固定。