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

I have some divs that are set with position absolute (CSS) when the page is ready, and are positioned relative to another fixed div, wich works fine. However, before the page is loaded and everything is set, if the page is resized, those absolute divs don't follow the changes, moving to other places, wich I think they are given values relative to top and left of the screen.

The position of the relative div I use as starting point to position the absolute ones may change position as well, relative to the ones above it.

Is there any way to listen the changes in the browser's width / height in order to make those divs stay placed in the right position.

Thanks in advance!

解决方案

First you want to start with binding the window resize event to a function of your choosing.

$(window).on("resize", methodToFixLayout);

Now you can determine the new heights and widths and make adjustments to the page from there.

function methodToFixLayout( e ) {

var winHeight = $(window).height();

var winWidth = $(window).width();

//adjust elements css etc.....

//$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);

}

Without more specifics on your layout it's hard to tell what changes you'll need exactly but this should get you going in the right direction.