当浏览器窗口高度降低时，我的侧抽屉会失去高度

Question

我有一个看起来像这样的项目。

我为它写了一个可折叠的侧边抽屉，我将位置设置为绝对文档正文，左0，顶部是顶部栏的高度。在我将浏览器窗口高度降低到足够低之前，它的行为应该是这样的，然后它看起来像这样：

我不是那么好的前端人，我尝试将侧抽屉高度设置为 100vh - topbar 高度，以及 100% - topbar 高度，都没有运气，没有解决问题。如果有人能对此有所了解，将不胜感激！

这里是scss的sn-p：

.control-panel {
  position: absolute;
  z-index: 1;
  background-color: lighten($profile-cards-role-extra-light-grey, 45%);
  width: 30rem;
  left: 0;
  min-height: calc(100vh - 9.4rem);
  box-shadow: 0 2px 6px 0 rgba(#000, 0.2);
  transition: margin, box-shadow, 0.3s ease-out;

  padding: 0 2rem;

  .toggler-btn {
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;

Answer 1

您正在使用vh 单位，它的行为与窗口的高度相关。所以如果窗口确实试图保持它的比例，它也会缩小。