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

【问题标题】：To change panel size according to the screen size根据屏幕尺寸更改面板尺寸
【发布时间】：2018-02-19 21:22:34
【问题描述】：

在我的网站上，我在右侧有一个面板（图 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 但无法获得想要的结果。

【问题讨论】：

将width:600px; 更改为某个百分比，例如width:30%;
是的，正如 Pavan 所说，您必须使用响应式值，而不是固定值。
我试过了（使用宽度：50%;），但没有解决。
位置怎么样：固定；顶部：0px；底部：0px；应该这样做。

标签： html css angular css-position responsive

【解决方案1】：

使用位置固定和顶部、右侧、底部属性。像这样：

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

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

【讨论】：

感谢您的建议，但它仍然无法按我的意愿工作。您认为面板内的元素可能导致这种情况发生吗？还是应该只更改最外层类的 css 来解决这个问题？
当我从底部减小/调整屏幕尺寸时，如图 2 所示，面板的某些部分被隐藏（仍然）；面板的大小应该与屏幕的大小一致，以完全显示自己。
这可能是因为您没有正确定位面板内的这些部件。面板本身会粘在屏幕上并调整其大小，但您仍然需要确保该面板内是否有一个粘性条来相对定位它，而不是绝对定位。
面板可以正常工作，但是当我减小屏幕尺寸时，它不会调整大小（我使用的是 position: fixed；不过）并最终被屏幕剪辑（如第二个屏幕截图所示），所以一些信息。它仍然隐藏在里面