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

To set 'element' height the height of the window you need to.

$('element').height($(window).height());

Answer 2

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.

Answer 3

Set a variable to window.innerHeight

$(document).ready(function() {
    var height = window.innerHeight;
    $(".bg").css("height", height);
});

See: https://developer.mozilla.org/en-US/docs/DOM/window.innerHeight for more details on window.innerHeight.

window.innerHeight returns the height of the user's viewport, not really the screen resolution, as you were asking, but it works. There is also window.innerWidth and other methods of grabbing the user's screen statistics.

You can also use self.innerHeight, parent.innerHeight, and top.innerHeight but these have different purposes. (See link).

Also, you're using $(window).css("height"); The jQuery css() function assigns css values, it doesn't return a string. It would be $(window).height() because height() does return a string.

var height = function() { return this.length; }
// height() returns "this.length"

Answer 4

Try this, it keeps the image's aspect ratio

$(function(){
var ratio = $("img").width() / $("img").height();
var newWidth = ($(window).height()-10) * ratio;
if(newWidth > $(window).width())
        $("img").css("width","100%");
    else
        $("img").css("width",newWidth+"px");
$(window).resize(function(){
    var ratio = $("img").width() / $("img").height();
    var newWidth = $(window).height() * ratio;
    if(newWidth > $(window).width()){
        $("img").css("width","100%");

        }
    else{
        $("img").css("width",newWidth+"px");

        }
});
});

Answer 5

You have to use jQuery(window).height(). Windows doesn't actually have a dynamic height css property that change with resolution.