截断时使绝对定位的元素滚动

Question

在我的网站上，有一个FAQ部分，它位于绝对位置，以便可以从屏幕外滑入。转到http://www.mordstats.com，然后单击大的“？”在右上角，然后单击“常见问题”以查看它。

当浏览器窗口高度太短并且FAQ部分被截断时，它不会滚动。是否可以解决此问题，同时仍然允许FAQ部分保持其位置和过渡效果？

将overflow-y: auto添加到#faqMenu.menu和/或设置position: fixed不起作用。老实说，不确定是否还可以尝试。

可以通过在http://www.mordstats.com上查看页面源以及CSS样式here来查看完整的HTML代码。相关位：

.menu {
  position: absolute;
  top: 71px;
  right: 0px;
  padding: 0;
  overflow: hidden;
  /* other stuff */
  transition: right 0.3s;
}

/* menuHide is removed via JavaScript when corresponding text is clicked */
.menu.menuHide {
  display: block;
  position: absolute;
  height: 124px;
  width: 275px;
  top: 71px;
  right: -275px;
  transition: right 0.4s;
}

#faqMenu.menuHide {
  right: -400px;
}

#faqMenu.menu {
  top: 195px;
  height: auto;
  width: 400px;
  display: flex;
  /* other stuff */
}

<div id="menuBar">
  <!-- left and center divs -->
  <div id="menuRight" class="menuBox">
    <!-- other things -->
    <div id="faqMenu" class="menu menuHide" onclick="event.stopPropagation()">
      <!-- FAQs here -->
    </div>
  </div>
</div>

我希望FAQ部分在滚动时会滚动，但不是。

Answer 1

首先，要解决滚动问题-实际上，您只需要以正确性指定具有最高优先级的选择器的正确顺序来定义bottom:0和overflow-y:scroll：即div#faqMenu.menu。如果在#faqMenu.menu或div#faqMenu上定义声明，则可能没有最高优先级，某些声明可能没有应用。您可以查看this article（在有关样式选择器优先顺序的此主题的不相关S.O.问题的最高答案中提到）

[在上面的屏幕快照中，您可以在检查器样式表摘要中无条件地在此处指定overflow-y，但是我在max-height上应用了媒体查询，以确定何时应应用bottom:0。该值的设置是任意的，并且实际上只是确保FAQ不会总是锁定在最底层，因为在这里并没有真正提到它。另外，我未设置列伸缩流。结果似乎并不理想，因为如果将其作为列水平滚动而不是垂直滚动。

---

提供的摘要片段

.menu {
  position: absolute;
  top: 71px;
  right: 0px;
  padding: 0;
  overflow: hidden;
  /* other stuff */
  transition: right 0.3s;
}

/* menuHide is removed via JavaScript when corresponding text is clicked */
.menu.menuHide {
  display: block;
  position: absolute;
  height: 124px;
  width: 275px;
  top: 71px;
  right: -275px;
  transition: right 0.4s;
}

#faqMenu.menuHide {
  right: -400px;
}

#faqMenu.menu {
  top: 195px;
  height: auto;
  width: 400px;
  /*display: flex;*/
  /*bottom:0;*/ 
  overflow-y:scroll;
  flex-flow:unset;
  display:block;
  /* other stuff */
}

@media screen and (max-height: 900px) 
{
    div#faqMenu.menu {
        bottom:0;
    }
}
<div id="menuBar">
  <!-- left and center divs -->
  <div id="menuRight" class="menuBox">
    <!-- other things -->
    <div id="faqMenu" class="menu menuHide" onclick="event.stopPropagation()">
      <!-- FAQs here -->
    </div>
  </div>
</div>