Set div height equal to screen size
Using CSS {height: 100%;}
matches the height of the parent. This could be anything, meaning smaller or bigger than the screen. Using {height: 100vh;}
matches the height of the viewport.
.container {
height: 100vh;
overflow: auto;
}
According to Mozilla's official documents, 1vh is:
Equal to 1% of the height of the viewport's initial containing block.
You need to give height
for the parent element too! Check out this fiddle.
CSS:
html, body {height: 100%;}
#content, .container-fluid, .span9
{
border: 1px solid #000;
overflow-y:auto;
height:100%;
}
JavaScript (using jQuery) Way:
$(document).ready(function(){
$(window).resize(function(){
$(".fullheight").height($(document).height());
});
});
try this
$(document).ready(function(){
$('#content').height($(window).height());
});