Full screen layout

Full screen layout refers to the html page covered the entire browser window, and no scroll bars, but also follow the changes in the size of the browser changes

<header></header>
<div class="content">
   <div class="left"></div>
   <div class="right"></div>
</div>
<footer></footer>

html,body{
   margin: 0;
   overflow:hidden;
}

header{
   height: 100px;

   position: fixed;
   top:0;
   left: 0;
   right: 0;
   background-color: lightgray;
}

.content{
   position: fixed;
   left: 0;
   right: 0;
   top: 100px;
   bottom: 100px;

   overflow: auto;
}

.content .left{
   width: 300px;
   height: 100%;
   position: fixed;
   left:0;
   top: 100px;
   bottom: 100px;
}

.content .right{
   height:1000px;
   margin-left:300px;
} 

footer{
   height: 100px;
   position: fixed;
   bottom:0;
   left:0;
   right:0;
   background-color: lightgray;
}