0

在此处输入图像描述我创建了一个根据窗口屏幕大小调整高度的网站,这意味着不会有滚动。它按预期工作正常,但在 windows xp 中的 chrome 上不能正常工作,即使它在 chrome 中的 Windows 7 中工作正常。

这是jsfiddle 演示

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. 示例 1 http://api.browsershots.org/png/original/50/50a5be866ec601d18f396ff7176f8e4e.png

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

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

4

1 回答 1

0

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

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

于 2012-07-26T21:56:37.673 回答