title: To change panel size according to the screen size
body: <p>On my website, I have a panel on the right side (Image 1) that slides in and out on click of a button. I have set the dimensions of the panel such that it covers the entire height of the screen.<a href="https://i.stack.imgur.com/dF5Zc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dF5Zc.jpg" alt="enter image description here"></a></p>
  
  <p>This is the CSS that I use for this panel-</p>
  
  <pre><code>slide-in-panel-component{ display:none; position: fixed;top: -10px; margin-right: 20px; height: 100vh; width:600px; right: -600px; background-color: #fff3e2;z-index:9999999}
  </code></pre>
  
  <p>As I change the screen size (or on a smaller screen), I want the panel to show in it's entirety, but adjusted to the size of the screen i.e. its height should change according to the height of the screen.
  Currently, as in Image 2, if I decrease the screen size, it goes over the panel and hides certain components of the panel.<a href="https://i.stack.imgur.com/xHQ1x.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xHQ1x.jpg" alt="enter image description here"></a></p>
  
  <p>I tried using position:fixed, setting min-height but could not get the desired result.</p>