使用 jQuery 收听浏览器宽度/高度的变化

Question

当页面准备好时，我有一些 div 设置了绝对位置 (CSS)，并且相对于另一个固定 div 定位，这工作正常。 但是，在页面加载并设置好所有内容之前，如果调整页面大小，那些绝对 div 不会跟随更改，移动到其他位置，我认为它们被赋予了相对于屏幕顶部和左侧的值。

我用作定位绝对 div 的起点的相对 div 的位置也可能会改变位置，相对于它上面的那些。

有没有办法监听浏览器宽度/高度的变化，以使这些 div 保持在正确的位置？

Answer 1

首先，您要开始将窗口调整大小事件绑定到您选择的函数。

$(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);
}

如果没有关于您的布局的更多细节，很难确切地说出您需要哪些更改，但这应该会让您朝着正确的方向前进。

Answer 2

如果您只需要相对于另一个元素而不是整个文档来定位您的元素，则可能没有必要使用 JavaScript。 您可以使用“位置：相对”：

<div id="myContainer" style="position:relative">

    <div id="myElement" style="position:absolute;left:100px;"></div>

</div>

因为 myContainer 有position:relative ，所以 myElement 将绝对定位但相对于 myContainer 而不是相对于整个文档。 有了这个，您就可以构建非常复杂但强大的位置，这些位置将与浏览器大小无关。

Answer 3

jqui 网站上也有这个插件。

http://www.jqui.net/jquery-projects/jquery-mutate-official/

这是演示： http : //www.jqui.net/demo/mutate/

希望能帮助到你。