考虑以下简单的html页面:
<doctype>
<html>
<head>
<title>This is my page</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body style="padding:0px;margin:0px">
<div id="root" style="background-color:#dddddd;width:100px;height:100px;position:relative">
<div id="graph" style="background-color:#00ff00;width:200px;height:200px;position:absolute;bottom:0px">
This is the DW box
</div>
</div>
<script type="text/javascript">
$(window).resize(function(){
$('#root').width($(window).width());
$('#root').height($(window).height());
});
</script>
</body>
</html>
正如您使用jQuery
所看到的那样,我调整了div root
的大小以适应窗口。如果您尝试使用该代码(至少在Chrome上,我的版本是Chrome 23),那么root
会不断地横向调整浏览器窗口。垂直拟合也正确执行,但仅在增加浏览器的窗口高度时才会执行。
如果您尝试垂直展开浏览器窗口,没问题。但是,在扩展后,如果您尝试减少浏览器窗口的垂直占用,root
将无法适应它!
你可以在这里看到我的窗口。
我在这里扩展,没有错,灰盒子(根)扩展。
不幸的是,快照工具没有显示滚动条,但很明显,当减小垂直尺寸时,灰色框不适合...
这是为什么?如何解决这个问题?三江源
您会看到一个名为graph
的div。该div应该保留在浏览器窗口的下半部分。
答案 0 :(得分:2)
这里的重点是jQuery(window).height()== document.documentElement.clientHeight(与jQuery 1.8+一样),在不同的浏览器中表现不同。
$(document).height()返回scrollHeight,offsetHeight和clientHeight之间的最高值 - 但浏览器之间的结果却截然不同。
因此,与使用CSS相比,实际上 更少 跨浏览器。这就是你应该做的:
html,body { height:100%; }
#root { min-height:100%; position:relative; }
#graph { position:absolute; bottom:0; }
答案 1 :(得分:1)
make it cross browser
也you have to use css
html and body
。
在我的小提琴中我改变了css:
html,body{height:100%;}
然后jquery中的小变化:
$(window).resize(function() {
$('#root').width('100%'); // <---100% width
$('#root').height('100%'); //<---100% height
});
这样你就不会在扩大或缩小窗口时出现故障。
结帐更新的小提琴:http://jsfiddle.net/D6YUr/2/
答案 2 :(得分:1)
答案 3 :(得分:0)
正如我在评论中写的那样,我只看到一个问题。零宽度空间(​
)。这是一个不可见的Unicode字符,用于标记单词可以分开的位置(在行的末尾)。如何进入你的代码我真的不知道。所以我只是重新输入你的代码(我知道删除它的唯一解决方案)
结果如下:
<doctype>
<html>
<head>
<title>This is my page</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body style="padding:0px;margin:0px">
<div id="root" style="background-color:#dddddd;width:100px;height:100px;position:relative">
<div id="graph" style="background-color:#00ff00;width:50px;height:20px;position:absolute;bottom:0px">
</div>
</div>
<script type="text/javascript">
$(window).resize(function(){
$('#root').width($(window).width());
$('#root').height($(window).height());
});
</script>
</body>
</html>
它看起来完全相同,但零宽度空间被删除。