问如何在页面滚动和处理高度时制作div滚动

EN

 $("#hide_show").click(function(){
        $("#toggle").toggle();
    });

.fixed_div {
    background-color: gray;
    border: 1px solid red;
    float: right;
    left: 75%;
    position: fixed;
    top: 9%;
    width: 20%;
    height:320px;
    px;
    
}
.left_content{
   background-color: gray;
    border: 1px solid red;
 width: 59%;
    height: 150px;
}
.header{
  background-color: gray;
    border: 1px solid red;
    height: 100x;
    text-align:center;
    margin-bottom:10px;
}
.footer{ 
  background-color: gray;
    border: 1px solid red;
    height: 100px;
    text-align:center;
    margin-top:10px;
}

<div class="header">

 i am header

</div>
<div class="left_content">

 i am static content

</div>
<div class="left_content">

 i am static content
 <input type="button" value="hide" id="hide_show">
</div>
<div class="left_content" id="toggle">

 i am static content
 
 


</div>
<div class="fixed_div">

helloo i have to scroll across all the page 

</div>
<div class="footer">

 i am footer
 

</div>