title: Expanding a div's height when page scrolls down
body: <p>I'm looking for a way to dynamically change a div's height when a page scrolls. This is because I have a fixed panel on the right side of the screen, and a menu banner at the top.</p>
  
  <p>When at the top of the page, the top of the side panel touches the bottom of the banner at the top. Thing is, when the page is scrolled down and the banner leaves the screen, this leaves a gap the size of the top banner between the top of the screen and the top of the side panel. I'd like to put a div between them that would grow in height when the page is scrolled down. Is there a way in css or js to do so ?</p>
  
  <p>I can't just have the side panel have 100% height because it would hide some elements on the top banner, especially on lower resolution screens.</p>
  
  <p>I added some ugly images made on paint to explain :</p>
  
  <p><a href="https://i.stack.imgur.com/XAocV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XAocV.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/fkNx9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fkNx9.png" alt="enter image description here"></a></p>
  
  <p>This is the css for the side panel :</p>
  
  <pre><code>position: fixed;
  right: 0;
  top: 180px;
  height:calc(100% - 180px);
  </code></pre>