固定 div 与滚动

Question

JS Fiddle

我在屏幕底部有一个固定的过滤器系统（我打算稍后动画这个弹出）：

<nav></nav>

<ul class="filter">
    <li>filter option</li>
    <li>filter option</li>
    ..... 
</ul>

当您缩小窗口时，过滤系统会越过导航。如何防止过滤系统越过导航，我希望它与导航的底部对齐，然后允许用户上下滚动。

我尝试过将过滤系统相对定位在导航下方 - 这样它就不会超过顶部，但它不会与窗口底部对齐。

所以我想要一个位于屏幕底部的过滤器系统，如果它足够高或用户窗口足够小，我希望用户能够滚动过滤器列表。

仅使用 CSS 是否可行？

Answer 1

为了改变这一点，您必须使用媒体查询，例如：

@media screen and (max-height: 200px) {
  .filter {
    position: relative;
  }
}