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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With