javascript - 如何在页面滚动和处理高度时使 div 滚动

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

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