How to set div height to 100% of user's monitor resolution?

Question

height: 100% in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.

Answer 1

'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:

#my_div
{
  height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}

Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):

#my_div, #parent_of_the_div, body, html
{
  height: 100%; /* This works, but it will show scrollbars if the body
                   or html elements have padding or margins. */
}

Answer 2

So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:

html {
    height: 100%;
}

body {
    height: 100%;
}

#contentDiv {
    min-height: 100%;
}

Answer 3

No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

so you can write it on your style :

#contentDiv {
  height: 100vh;
}

Answer 4

Pure css

#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

Good Luck

Or javacript Jquery:

Ready (not innerHeight in ie8):

$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});

resize window :

$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});

Answer 5

With jQuery, you could use:

$('div.class').css('height', $(window).height()+'px');

Answer 6

There are a few options you may find useful:

vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)

#container{
height: 100vh;
background: black;
}

Answer 7

My answer builds on jonwayne's because there wasn't much explanation.

You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet

// jquery shorthand for onLoad event
$(function() { 
    // Set the css height property of #div_to_resize to the css 
    // height property of the browser window
    $('#div_to_resize').css('height',$(window).css('height'));
}

You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be

// We extracted this to a function since we reference it more then once
function matchHeight() {
    $('#div_to_resize').css('height',$(window).height);
}

// jQuery shorthand for document.onload
$(function() { 
    matchHeight();
    //On the resize event, call matchHeight()
    $(window).resize(matchHeight);
});

Answer 8

I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This post might help for getting the height.