我们在HTML中有两个DIV，一个人在左侧对齐，另一个在右侧对齐。
现在，我们希望将它们设置为适合浏览器窗口中的全屏。
此外，我们需要DIV高度始终是100％的浏览器窗口，无论是否有内容。
当导航菜单显示在左侧的导航菜单和右侧的页面内容时，此样式非常有用。
您可以使用CSS或者jQuery轻松地将div设置为窗口高度的100%。

网页HTML就是如下所示。

<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>

最初，HTMLCSS是以下内容。

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

使用CSS的第一个解决方案：
用以下CSS替换“DIV1”和“DIV2”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%;
}

带jQuery第二种解决方案：
使用以下jQuery与初始CSS。

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