Ho creato questo codice al volo come punto di partenza spero possa esservi utile
codice:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>

<style>
body { padding:0px;
margin:0px;
overflow-x:hidden}
         
#box-sinistro{ width:20%;
               background-color:#666;
               height:auto;
               display:none;
               float:left;
               position:fixed;
               left:0px;
               top:0px;
               overflow-y:scroll
 }

#box-centro{ background-color:#FFFF00; 
            width:100%;
             min-height:800px ;
             height:auto;
             
                     }
     


#box-article{ width:100%; 
height:350px;

 background-color:#CCC
 
 
   }


#box-article  #article{ width:300px; 
height:300px;
border:1px solid #009;
background-color:#FFFFCC;
float:left;

margin:5px;
border-radius:10px; }


#button{ width:100%;
height:50px;
background-color:#FF9900;
margin-top:50px;}

</style>

<script src="//apricenacerca.it/public/jq/jquery.js"></script>
</head>

<body>


 

<div id="box-sinistro">sinistro 

<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>

</div> 


<div id="box-centro"> 
<button id="button-apri-menu" onClick="aprimenu()">apri box sinistro</button>
<br>centro 




<div id="box-article">
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
 </div>


<div id="box-article">
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
 </div>

<div id="box-article">
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
 </div>




</div>





 
<script>


$('#box-sinistro').height(  $(window).height() +"px");



function aprimenu(){
    
    $('#box-sinistro').toggle();
    
    
    if ( $('#box-centro').css('position') == 'absolute'  )
    {
        //alert('chiudi');
    
      $("#button-apri-menu").html('Apri');
        
     $('#box-centro').css({
         'width':'100%'  ,
         'position':'',
        'left':'0%'
         });
         
    }
    else
    {
        
        //alert('apri');
          $("#button-apri-menu").html('Chiudi');
     $('#box-centro').css({
         'width':'100%',
        'position':'absolute',
        'left':'20%'
         });
         
    }
    
    
    
         
    }
</script>




 




</body>
</html>