我有一些 div 在页面准备好时设置了绝对位置 (CSS),并且相对于另一个固定的 div 定位,效果很好。然而,在加载页面并设置所有内容之前,如果调整页面大小,那些绝对 div 不会跟随变化,移动到其他地方,我认为它们被赋予相对于屏幕顶部和左侧的值。
我用作定位绝对 div 的起点的相对 div 的位置也可能相对于它上面的 div 改变位置。
有什么方法可以监听浏览器宽度/高度的变化,以使这些 div 保持在正确的位置吗?
最佳答案
首先,您要开始将窗口调整大小事件绑定(bind)到您选择的函数。
$(window).on("resize", methodToFixLayout);
现在您可以确定新的高度和宽度,并从那里对页面进行调整。
function methodToFixLayout( e ) {
var winHeight = $(window).height();
var winWidth = $(window).width();
//adjust elements css etc.....
//$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}
如果没有关于您的布局的更多细节,很难说出您究竟需要进行哪些更改,但这应该会让您朝着正确的方向前进。
关于javascript - 使用 jQuery 监听浏览器宽度/高度变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1655343/