setting div width according to the screen size of user

Question

I am trying to set the width and height of a div exactly equal to the size of my users screen. How can it be done. Should I use jquery ? If so, how ?

Answer 1

What about some CSS? http://jsfiddle.net/TJGZU/

body, html { /* set size of body to full page and remove margins */
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

div { /* set div to full width and height */
    width: 100%;
    height: 100%;
}

Answer 2

by css seems ideal as pimvdb has suggested...doing it in jquery would be inline styling which would be a bad practice which can be avoided unless necessary.

by means of jquery:

    var windowWidth = $(window).width();
    var windowHeight =$(window).height();
    $('div').css({'width':windowWidth ,'height':windowHeight });

Edited Part:

var windowWidth = ((parseInt($(window).width())) / 2) - 120;

like this whatever height and width seems ideal for you, you can obtain via this.

Answer 3

below is a sample code for your problem:

var windowWidth = ((parseInt($(window).width())) / 2) - 120;

Also, note that this answer makes use of jQuery.