<style>

 *{margin:0;padding:0;}

 html,body{height:100%;}

 .wrap{position:relative;height:100%;}

 .header{height:80px;}

 .container{position:absolute;top:0;right:0;bottom:0;left:0;margin-top:80px;}

 .section{position:relative;float:left;height:100%;box-sizing:border-box;}

 .left_area{overflow-x:hidden;overflow-y:auto;width:25%;background-color:pink;

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  -webkit-transform: translateZ(0);   -moz-transform: translateZ(0);   -ms-transform: translateZ(0);   -o-transform: translateZ(0);   transform: translateZ(0);   -webkit-touch-callout: none;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none;   -webkit-text-size-adjust: none;   -moz-text-size-adjust: none;   -ms-text-size-adjust: none;   -o-text-size-adjust: none;   text-size-adjust: none;

 }

 .center_area{width:50%;border-right:1px solid #666; border:1px red solid; border-left:1px solid #666;background-color:tan;}

 .center_area .contents{position:absolute;top:0;right:0;bottom:100px;left:0;overflow-x:hidden;overflow-y:auto;background-color:rgba(255,255,255,0.5);}

 .center_area .footer{position:absolute;right:0;bottom:0;left:0;height:100px;}

 .right_area{overflow-x:hidden;overflow-y:auto;width:25%;background-color:skyblue;}

 ::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }  ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef}  ::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}  ::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

 </style>

 [html]

 <div class="wrap">

 <div class="header">

 <h1>A</h1>

 </div>

 <div class="container">

 <div class="section left_area">

 <h1>B</h1>  ----------------------------------------------------------------------------------------------------------------------------------------------------------------------  .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

 .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

 </div>

 <div class="section center_area">

 <div class="contents">

 <h1>C</h1>

 .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

 .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

 </div>

 <div class="footer">

 <h1>E</h1>

 </div>

 </div>

 <div class="section right_area">

 <h1>D</h1>

 .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

 .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

 </div>

 </div>

 </div>