Geek Answers Handbook

Dynamically resize div based on browser window size

I am trying to figure out how to have a dynamic resize of a div depending on the size of the browser window. I created jsbin which illustrates my problem here: http://jsbin.com/uxomul

What I want to do is resize the div that contains the images so that the div always fills what remains of the height of the browser window (except for the 25px field at the bottom set on the body).

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

Any ideas what would be the best way to get close to this?

+8
javascript jquery html css resize
source share
4 answers

You can do something like this:

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

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

You can also put it in a function and call it both when the page loads, and when resizing

+11
source share

Use CSS position: absolute / relative in combination with CSS top / bottom / left / right. Example:

 <!doctype html> <html> <head> <style> html, body { margin:0; padding:0; width:100%; height:100%; } #head { width:100%; height:100px; background:black; color:white; } #head > h1 { margin:0; } #body { position:absolute; width:100%; top:100px; bottom:25px; background:red; } #body > div { position:absolute !important; } #body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; } #body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; } #body-content > img { margin:25px; width:500px; vertical-align:middle; } </style> </head> <body> <!-- Head --> <div id="head"> <h1>Header</h1> </div> <!-- Body --> <div id="body"> <!-- Sidebar --> <div id="body-sidebar"> <h2>Sidebar</h2> </div> <!-- Content --> <div id="body-content"> <h2>Content</h2> <img src="http://dl.dropbox.com/u/3618143/image1.jpg" /> <img src="http://dl.dropbox.com/u/3618143/image2.jpg" /> <img src="http://dl.dropbox.com/u/3618143/image3.jpg" /> </div> </div> </body> </html>
+7
source share

You can try to bind to the resize event of the browser window.

For example:

 window.onresize = function() { //your code }
+6
source share

The position must be corrected, so it will be automatically changed.

If the screen height has changed at runtime

Put this on the CSS sheet:

 #FitScreenHeight { position:fixed height:100% }
+1
source share

More articles:


All Articles