如何在页面滚动和处理高度

Question

https://jsfiddle.net/fy7dzfdL/1/

您好我创建了jsfiddle 让你更好地了解我目前的情况。 我正在制作固定的div，必须滚动页面滚动，完美地通过位置固定，但在我的html文档中，当您向末端滚动页脚或当您单击隐藏按钮时，您将看到滚动div与页脚混合，这是问题如何在底部处理它。

这里是JS css和html

 $("#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>

Answer 1

将静态内容内容包装在div中。然后将div的CSS min-height设置为等于固定div的高度。