How to get an element the same height as browser resolution?

Question

I am trying use jquery to set the height of an element to equal the users browser. Here is the code I got so far that\'s not working. Is it because I have a minimal height set

Answer 1

You can use this javascript script to get the height and width of the browser. It supports multiple browsers as well:

var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

The width and height of the browsers will be stored in the viewportwidth and viewportheight variables, respectively. You can then use something like

var bg = document.getElementById("bg");
bg.style.height = viewportheight;

This will set the element with id bg's height to the view port height.