Question

我需要将背景图片放在菜单div下面。因此，不是将背景应用于body元素，而是放入另一个包含我的body div的bg div，并将宽度设置为100％。（我的body div有指定的宽度）我在bg div中设置背景。

我测试了它，我得到了一半的背景图片，因为文件不够长。所以我试图为此做一个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/

的链接

Answer 1

这可能失败的另一个原因是缺少doctype声明（<!DOCTYPE html>）。添加此选项可修复$(window).height()以返回正确的视口高度。

Answer 2

这可以在CSS中完成。您需要确保所有包含元素至少是页面的高度（height: 100%）。这包括html和body元素。

此代码适用于您的网站：

html, body, #bg {
  height: 100%;
}

jquery $（window）.height（）和$（document）.height（）返回相同的

2 个答案: