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

Question

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

Hi i have created jsfiddle to make you aware better understanding of my current scenario . i am making fixed div that has to scroll with page scroll that is working perfectly by position fixed but in my html document when you scroll at the end towards footer or when u click on hide button you will see scrolling div mixing with footer that is the issue how to handle it in the bottom.

here is JS css and html below

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

Wrap the static content content in a div. Then set the CSS min-height of the div equal the the height of the fixed div.