Html 固定分区与滚动

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

过滤选项
过滤选项
..... 

当窗口变小时，过滤系统将越过导航。如何防止过滤系统越过导航，我希望它与导航基座对齐，然后允许用户上下滚动

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

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

---

仅使用CSS就可以做到这一点吗？

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

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

---

你能提供一个更准确的小提琴，我不能复制你的问题，或者可能我不明白你的意思。更改窗口的大小对您没有任何帮助me@AbdulAhmad将浏览器窗口的高度缩小，您将看到过滤系统位于导航上方。@AbdulAhmad或检查是否希望导航位于顶部？@AbdulAhmad我希望过滤系统不要超出导航这并不能回答问题；

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