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 in css? I really need that class to equal the users resolution.

<script type="text/javascript">
jQuery(function() { 
    jQuery(".bg").css("height", jQuery(window).css("height"));
}
</script>

Answer 1

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"