固定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;
  }
}