javascript - Dynamically resize div based on size of browser window

Question

I'm trying to figure out how to have a div dynamically resize, based on the size of the browser window. I've set up a jsbin that illustrates my problem, here: http://jsbin.com/uxomul

What I want to do is to resize the div that holds the images so that the div always fills what's left of the height of the browser window (except a 25px margin at the bottom, that's set on body).

Here's a demo that maybe illustrates what I want to achieve more clearly: http://emilolsson.com/shop/demo/layers

Any ideas what would be the best way to approach this?

Answer 1

You can do something like this:

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25 is just a sample number, for example your margin (you can get this dynamically too)

You may also want to wrap it into a function and call this on both page load and on resize