我创建了一个根据窗口屏幕大小调整高度的网站,这意味着不会有滚动。它按预期工作正常,但在 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 获取的屏幕截图。