gpt4 book ai didi

jquery - 为什么在减小垂直尺寸时 div resize 不适合浏览器窗口?

转载 作者:太空宇宙 更新时间:2023-11-03 21:55:31 25 4
gpt4 key购买 nike

考虑以下简单的 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 将不适合它!

演示

你可以在这里看到我的窗口。

enter image description here

我这里展开,没有错,灰色框(根)展开

enter image description here

不幸的是,快照工具没有显示滚动条,但很明显,当缩小垂直尺寸时,灰色框不适合...

enter image description here

这是为什么?如何解决这个问题?谢谢

附言

您会看到一个名为 graph 的 div。该 div 应该位于浏览器窗口的下部。

最佳答案

这里的要点是 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; }

关于jquery - 为什么在减小垂直尺寸时 div resize 不适合浏览器窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14119547/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com