chrome中的jquery自动高度问题

Question

我创建了一个根据窗口大小调整高度的网站，意味着没有滚动。它的工作正常如预期，但在Windows XP中没有镀铬，即使它在Windows 7中也能正常工作。

这里是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 。

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