Dynamically resize div based on window size

Question

I'm trying to optimise my website for different resolutions. In the center of the website I have a DIV that currently has a fixed size. I'm trying to make its size (and contents) change according to the size of the browser window. How do I do that? This is my website if you want to take a look at its code: http://www.briefeditions.com

Answer 1

If you resize the page the div will resize with it and on load of the page.

$(window).on('load resize', function(){
    $('#div').width($(this).width());
});

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
       var windowHeight = $(window).height();
       $('#divID').css('min-height',windowHeight+'px');
});

UPDATE

If you want that site will resize based on browser resize then use % instead of px

CSS:

html {height:100%; overflow:hidden}
body {height: 100%;}

Answer 3

You can do like this

var width = $(window).width(); 
$("#divId").width(width);

Answer 4

I guess you need screen width and height for client(users) machine.

at onload of page get screen width & height and set those values to divs using jquery/javascript

var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;

check this for more info

Answer 5

Keep in mind that in your example iframe also has fixed size. You should also resize it to the parents width. In your example this would work:

$(window).on('load resize', function(){
    $('#content, #content > iframe').width($(this).width());
});

Keep in mind that you must remove all margins, as well as absolute positioning like: top, left, position:absolute from you element styles.

Answer 6

I checked the code from the provided link in question.

Change width to 80% in #content style. And in .wrapper change width to 100%.

You have used mainly 920px for width, so whenever you will resize window the control will not re-size. Use equivalent % instead of 920px;