HTML＆amp; 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已经从正常的页面流中删除了。 使用最小高度和其他定位然后固定。