听浏览器宽度/高度与jQuery改变

Question

我有被设置与绝对位置（CSS）当页面准备好一些div，并相对于另一个固定的div被定位，至极工作正常。不过，在页面加载，可谓万事俱备，如果页面的大小时，这些绝对的div不按的变化，移动到其他地方，至极我觉得他们给出了相对于顶部的价值观和离开的画面。

的相对的div我使用作为出发点，以定位所述绝对者可能会改变位置，以及，相对于它上面的那些的位置。

是否有任何的方式来听，以便使这些div保持放置在正确的位置在浏览器的宽度/高度的变化。

提前感谢！

Answer 1

首先，你要开始与窗口resize事件绑定到您选择的功能。

$(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，如果你只需要在你的元素（S）的相对位置到另一个元件，而不是整个文件。可以使用 “位置：相对于”：

<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官方/

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

希望它帮助。