Question

我有一些在页面准备就绪时设置了绝对位置（CSS）的div，并且相对于另一个固定的div定位，这样可以正常工作。但是，在加载页面并设置所有内容之前，如果页面调整大小，那些绝对div不会跟随更改，移动到其他位置，我认为它们相对于屏幕的顶部和左侧给出了值。 / p>

我用作起点的相对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。您可以使用“position：relative”：

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

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

</div>

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

Answer 3

jqui网站也有这个插件。

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

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

希望它有所帮助。

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

3 个答案: