javascript - HTML & CSS : Fixed position when no scrollbar

Question

我正在为具有“固定页脚 block (FF_BLOCK)”、一些内容和“背景图像 block (BG_BLOCK)”(也包含一些内容)的网站制作模板。

当内容不多时，BG_BLOCK应该放在FF_BLOCK的正上方(position: fixed; bottom: 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% 来填充整个屏幕。