模态叠加问题

问题描述

首先，请原谅我不符合要求的解释，因为这是我在该平台上的第一篇文章，那么，我正在研究叠加层，必须在页面的右侧显示例如416px的宽度和高度的100vh，但是如果我减小浏览器窗口的大小，事情就会被削减，而当我减小浏览器窗口的大小时，底部的按钮开始出现在叠加层的内容上，即使在高度越来越低，这是我的代码，如下所示：

.advanced-overlay {
  width: 100%;
  min-height: 100vh;
  background-color: rgba(35,18,0.5);
  position: fixed;
  z-index: 100002;
  top: -41px;
  left: 0;
  bottom: 0;
  .advance-overlay-footer {
      display:flex;
      justify-content: space-between;
      align-items:center;
      position: fixed;
      right: 24px;
      width:156px;
      bottom: 24px;
      height:6%;
    }
  .advanced-overlay-content {
    position: relative;
    // min-height: 83vh;
    width: 416px;
    margin-top: 108px;
    margin-left: auto;
    margin-right: 6px;
    opacity: 1;
    z-index: 100004;
    border-radius: 16px 16px 16px 16px;
    background-color: #f5f4f6;
    Box-shadow: 0 2px 30px 0 rgba(0,0.07),0 19px 18px 0 rgba(0,0.05),0 8px 12px 0 rgba(0,0 1px 5px 0 rgba(0,0.04),0 0 2px 0 rgba(0,0.03);
   
    .close-advance-overlay {
      position: absolute;
      background-color: #fff;
      width: 110px;
      height: 40px;
      display: flex;
      border-radius: 20px;
      padding: 5px 22px;
      top: -18px;
      right: 155px;
      opacity: 1;
      cursor: pointer;
      img {
        height: 20px;
        width: 20px;
        align-self: center;
      }
      .button-text {
        align-self: center;
        margin-left: 5px;
        font-weight: 600;
        font-size: 16px;
        color: #000000;
      }
    }
    .advnaced-overlay-content-secion {
      //min-height:89vh;
      width: 100%;
      bottom:10%;
      // height:100vh;

      .select-Box {
        margin-top: 40px;
        margin-bottom: 40px;
      }

      .accordinan-filter {
        margin-bottom: 24px;
      }
      .accordian-title {
        font-weight: 900;
      }
      .accordian-content {
        margin: 0;
        font-size: 16px;
      }
    }
  }
   
}
.is-maximum {
  height: 73vh;
  overflow-y: auto;
  overflow-x: hidden;


  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #d3d3d3;
  }
}

<div class="advanced-overlay" v-if="toggleFilter">
    <div class="advanced-overlay-content">
        <div class="close-advance-overlay" @click="toggleAdvanceFilterOverlay">
            <img class src="../assets/icons/close.svg" />
            <span class="button-text">Close</span>
        </div>
        <div class="advnaced-overlay-content-secion is-maximum">
            <div class="select-Box"></div>
            <div class="accordinan-filter"></div>
        </div>
        <div class="advance-overlay-footer">...two buttons</div>
    </div>
</div>

所以，我最终想要实现的是，我想在浏览器窗口的右侧进行响应式叠加，前提是如果我要降低浏览器的高度，则底部的按钮应保持在该位置（固定位置）和内容应该在.advnaced-overlay-content-secion的范围内

解决方法

对于响应式设计，我建议您仔细阅读网格的使用，尤其是对于移动设计，还应使用@media断点。

要使某些东西停留在底部，只需使用： 位置：固定； 底部：0；