css absolute定位，如何让层固定在网页的底部，而不是浏览器的底部？[解决就结贴]

[stg609]

希望实现效果：

其中的白色框框是网页的主要内容，宽度固定，下面蓝色的是网页底部的背景，蓝色上方的白框中，我用来放网页底部的一些东西。
白框一直在浏览器中水平居中。

现在我利用footer这个div来存放网页底部的一些信息，样式。
但是显然直接在footer这个div中设置background-image,只能显示白框这个区域大小。所以我想用另外一个div来实现背景。让两个div重叠以实现效果。
用来做背景的div我设置其id为FootBg.
我现在的css代码为：

#Footer
{
	width: 970px;
　　　　 height:50px;
}
#FootBg
{
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	
}

可是这样只能让footer在浏览器的底部，而不是网页的底部，当我移动滚动条时就会出现问题。如图：




希望大家帮忙。

[怫悰]

position:absolute;
为何要用absolute？

[stg609]

改成absolute的，是为了让两个层实现重叠

[mataofq]

<div style="padding: 10px 10px">
<div> footer </div>
</div>

[stg609]

自己解决了，加个javascript语句：
<script >
document.getElementById("FootBg").style.top=document.body.clientHeight-120;
</script>
120为FootBg的高度