another HTML/CSS layout challenge

Question

I\'ve been trying to figure out a solution to this problem but haven\'t been 100% successful, just pseudo successful. The layout I\'m looking for is one such that there is a

Answer 1

The best and easy solution for this issue is this one. In this case you need two heights :

1. Windows height
2. Side-bar navigation height
3. Then check of windows height is less than div, then you need to increase the height of content area

$( document ).ready(function() { 
    var navh = $(".side-nav").height();//ide-nav
    var h = window.innerHeight;
    if (navh >h){
        $("#mainBody").height(navh);
    }
})