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

Question

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

31

当页面准备好时，我有一些用CSS设置为绝对位置的div，并相对于另一个固定的div进行定位，这方面运行良好。然而，在页面加载和设置完毕之前，如果调整页面大小，这些绝对定位的div不会跟随变化，移动到其他位置，我认为它们是相对于屏幕顶部和左侧给出的值。

用来定位绝对div的相对div的位置也可能发生变化，相对于其上方的div。

是否有任何方法监听浏览器的宽度/高度变化，以使这些div保持正确的位置？

- yoda

有使用JavaScript监听变化的方法，但是“position: fixed”已经解决了你的问题，不是吗？ - Pekka

不，它并不行，因为“position: fixed”随着浏览器滚动而滚动，会失去我需要的相对于另一个div的位置。 - yoda

我认为如果我们知道你实际想要什么，那么可能不需要使用JavaScript就能实现。虽然已经有一个答案被接受了，但对于这个问题来说，一个纯CSS的答案也会帮助其他人。 - andho

如果您可以展示想要实现的HTML示例，这将会非常有帮助。从您当前的问题来看，就像r-dub提到的那样，不是很清楚。 - andho

我认为你并不真正需要那个，你唯一需要知道的是标记中有一个相对节点和一个绝对节点，它会根据相对节点的位置在屏幕上改变自己的位置。现在没有任何标记，这个问题是一年前发布的。 - yoda

但它不是相关的div，你说它们是固定的div。它可能会相对于上面的div改变位置。但是，是的，已经一年了，所以没有必要深究这个问题。 - andho

3个回答

4

如果您只需要将元素相对于另一个元素而不是整个文档进行定位，则可能无需使用JavaScript。您可以使用"position:relative"：

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

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

</div>

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

- Rex M

谢谢指出，我忘了说当上面的div改变高度后，我用作“锚点”绝对定位的元素的位置也会改变。此外，页面本身在屏幕中心对齐。 - yoda

2

还有一个来自jqui网站的插件。

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

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

希望这能帮助到您。

- Val

谢谢提供链接，肯定会在不久的将来有所帮助 :) - yoda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rwilliams · Accepted Answer

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

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

没有更多关于你的布局的具体信息，很难确定你需要做出哪些更改，但这应该可以让你朝着正确的方向前进。