4

我需要我的背景图片位于我的菜单 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/

4

2 回答 2

5

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

于 2013-11-25T07:37:00.583 回答
1

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

此代码应适用于您的网站：

html, body, #bg {
  height: 100%;
}
于 2013-04-29T06:02:23.710 回答