chrome中的jquery自动高度问题

我已经创建了一个根据窗口屏幕大小调整高度的网站，这意味着不会有滚动。它的工作正常，但在WindowsXP中的chrome上没有，甚至在Windows7中的chrome上也没有

这是。

HTML:

Javascript:

var bodyheight = $(document).height();
$("#mainWrapper").height(bodyheight);
$("div").height($('#mainWrapper').height() - $("header").height() - $("footer").height() - 20);

和不同的浏览器快照

我搜索了很多次，尝试了很多次，但都无法解决此问题。希望我的问题清楚

以下是从Chrome windows xp中获取的屏幕截图

---

您的第一张图像来自不受支持的CHROME 3

---

它应该适用于所有现代浏览器。

是的，它应该适用，但不幸的是，它不适用于chrome。即使我在XP中安装了最新版本的chrome，但这个问题仍然存在。我已经添加了上面的图片。我已经做了很多次了，但是运气不好。所以你的建议对我很有帮助。谢谢

#mainWrapper {
    background: pink;
    overflow: hidden;
    position: relative;
    /*padding-bottom: 50px;*/
}
header {
    background: yellow;
    height: 85px;
}
footer {
    background: orange;
    overflow: hidden;
    position: absolute;
    left:0;
    bottom:0;
    height:30px;
    width:100%;
}
div {
    background: purple;
    margin-top: 10px;
}

var bodyheight = $(document).height();
$("#mainWrapper").height(bodyheight);
$("div").height($('#mainWrapper').height() - $("header").height() - $("footer").height() - 20);