chrome中的jquery自动高度问题

Question

我创建了一个根据窗口屏幕大小调整高度的站点，意味着不会有滚动。它按预期工作正常，但在 windows xp 中的 chrome 上不能正常工作，甚至在 Windows 7 中的 chrome 上也不能正常工作。

这里是jsfiddle demo。

HTML：

<section id="mainWrapper">
    <header>Header Content</header>
    <div>panel Content</div>        
    <footer>Footer Content</footer>
</section>

CSS：

#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;
}

Javascript：

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

以及来自Browser Shot的不同浏览器快照

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

以下是从 chorme-windows xp 截取的屏幕截图。

1. Example 1 http://api.browsershots.org/png/original/50/50a5be866ec601d18f396ff7176f8e4e.png

2. Example 2 http://api.browsershots.org/png/original/19/19f5f623ac0632361674f7e4f0606f94.png

3. Example 3 http://api.browsershots.org/png/original/e7/e7e9bf808583080c88ea15f24e913071.png

Answer 1

您拥有的第一张图片来自不受支持的 CHROME 3。

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