根据屏幕高度选择Selectize下拉菜单的高度

Question

你好！

我有一个下拉菜单，使用了“selectize”插件。由于我的下拉选择中有许多项目，因此如何根据屏幕高度设置下拉内容的高度呢？将它们显示在更长的列表中会更好。

目前我的下拉菜单如下：

期望的输出如下：

我尝试使用以下代码（只是在控制台上玩），但效果不佳：

.selectize-dropdown, .selectize-dropdown.form-control{
        height: -webkit-fill-available !important;
        height: -moz-available !important;
        height: fill-available !important;
}

.selectize-dropdown-content{
   /* height: -webkit-fill-available !important;
        height: -moz-available !important;
        height: fill-available !important;*/

}

任何建议请留言，谢谢！

- melvnberd

Answer 1

我能够通过以下方法达到所需的输出：

.selectize-dropdown, .selectize-dropdown.form-control{
    height: 90vh !important;
}

.selectize-dropdown-content{
    max-height: 100% !important;
    height: 100% !important;
}

- melvnberd

---

如果下拉菜单选项不是很多，这个解决方案就无法缩小规模，并且会引入大量不必要的空白。 - Twisted Whisper

Answer 2

.selectize-dropdown-content{
    max-height: 90vh !important;
}

这行简单的代码将使选择控件中添加/移除选项时能够很好地进行缩放。

带有许多选项的选择控件：

选择少量选项：

- Twisted Whisper