我需要我的背景图像在我的菜单div下面。所以，而不是应用背景到body元素，我放入另一个包含我的bodydiv的bgdiv，并设置宽度为100%。(我的bodydiv有一个指定的宽度)我把背景设置在bgdiv里面。
我测试了它，我得到了半个背景图片，因为文档不够长。所以我试图做一个javascript修复这个。
<!DOCTYPE HTML>
.....
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
function setDocumentSize() {
alert($(window).height());
alert($(document).height());
if ($(window).height()>$(document).height()) {
var height = $(window).height()-$(document).height();
document.getElementById('bg').style.height=height+"px"
}
}
.....
</script>
.....
<body onload="setDocumentSize()">
<div class="menu">
.....
</div>
<div class="bg">
<div class="body">
.....(background in this div)
</div>
</div>
现在两个警报都弹出了视窗高度。所以什么也没发生。
我用的是Firefox 16.0.2
这里是到实际页面的链接http://servapps.dyndns-work.com/abstract/
失败的另一个原因是缺少doctype声明(<!DOCTYPE html>)。添加此修复$(window).height()返回适当的视口高度。
这可以在CSS中完成。您需要确保所有包含元素至少是页面的高度(height: 100%)。这包括html和body元素。
这段代码应该适用于你的网站:
html, body, #bg {
height: 100%;
}