How to Make a Div Height 100% of Browser Window

You have two div in HTML, one is aligned on the left side and another is aligned on the right side. Now you want to set them both to fit to full screen in the browser window. Also, you need both div height would always be 100% of browser window whether it have any content or not. This style is very useful when the navigation menu is displayed at the left side and the page content on the right side. You can make a div 100% of window height easily using CSS or jQuery.

The web page HTML is like the below.

<div class="container">
  <div class="div1">
    <ul>
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
    </ul>
  </div>
  <div class="div2"><p>It is the main content section.</p></div>
</div>

Initially, the CSS of HTML is the following.

.container{width: 100%}
.div1{
    float: left;
    background-color: #F5A623;
    width: 20%;
}
.div2{
    float: left;
    background-color: #FFF;
    width: 80%;
}

First solution with CSS:
Replace the div1 and div2 CSS with the following CSS.

.div1{
    float: left;
    background-color: #F5A623;
    width: 20%;
    position: absolute;
    top: 0;
    bottom: 0;
}
.div2{
    float: left;
    background-color: #FFF;
    width: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    left:21%;
}

Second solution with jQuery:
Use the following jQuery with the initial CSS.

$(function(){
    $('.div1, .div2').css({ height: $(window).innerHeight() });
    $(window).resize(function(){
        $('.div1, .div2').css({ height: $(window).innerHeight() });
    });
});