Some time you are in a situation where you want your content div should be 100% height in any resolution if it has more content than there should be a scroll when there is little content there should be no scroll bar you can say height will increase or decrease according to screen resolution you mainly find this kind of problem when you are working with application.

Example for single content div in application

html, body
{
    height: 100%;
    padding: 0px;
    margin: 0px;
	overflow:hidden;
}
 #header
{
    background-color: black;
    height: 100px;
    line-height:100px;
    color:#fff;
}
        
#content
{
    overflow-y:scroll;
}
        
#footer
{
    background-color: black;
    height: 50px;
	line-height:50px;
	color:#fff;
}

 
$(document).ready(setHeight);
$(window).resize(setHeight);
function setHeight() {
    var setNewHeight = $(window).height() - $("#header").height() - $("#footer").height();
    $("#content").css("height", setNewHeight);
}

Demo link

Example for double content div in application

html, body
{
    height: 100%;
    padding: 0px;
    margin: 0px;
	overflow:hidden;
}
        
#header
{
    background-color: black;
    height: 100px;
	line-height:100px;
	color:#fff;
}
        

  #content .inner
{
    overflow-y:scroll;
	height:50%;
}      
#footer
{
    background-color: black;
    height: 50px;
	line-height:50px;
	color:#fff;
}

 
$(document).ready(setHeight);
$(window).resize(setHeight);
function setHeight() {
    var setNewHeight = Math.round(($(window).height() - $("#header").height() - $("#footer").height()) / 2);
	console.log(setNewHeight)
    $(".inner").css("height", setNewHeight);

Demo link