根据屏幕尺寸更改面板尺寸

Question

在我的网站上，我右侧有一个面板（图1），点击按钮即可滑入和滑出。我已经设置了面板的尺寸，使其覆盖了整个屏幕高度。

这是我用于此面板的CSS -

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}

当我更改屏幕尺寸（或在较小的屏幕上）时，我希望面板完整显示，但调整到屏幕的大小，即其高度应根据屏幕的高度而变化屏幕。 目前，与图像2中一样，如果我减小屏幕尺寸，它会越过面板并隐藏面板的某些组件。

我尝试使用position：fixed，设置min-height但无法获得所需的结果。

Answer 1

使用固定位置以及顶部，右侧，底部属性。像这样：

.panel {
  position: fixed;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 50%;
  background: green;
}

<div class="panel">
  
</div>