根据屏幕高度选择下拉高度

Question

美好的一天！

我有一个使用 "selectize" 插件的下拉菜单 select。我如何根据屏幕高度设置下拉内容高度，因为我的下拉列表中有很多项目 select，最好将它们显示在一个比短列表长得多的列表中..

目前我所拥有的。

期望的输出

我试过使用下面的代码，只是在控制台上玩，但效果不佳。

.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;*/

}

有什么建议吗，谢谢！

Answer 1

我设法通过

获得了期望的输出

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

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

Answer 2

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

当 select 控件的选项为 added/removed 时，这行简单的代码将很好地缩放 up/down。

Select 有很多选项：

Select 选项很少：

根据屏幕高度选择下拉高度

selectize dropdown height base on screen height

javascript

jquery

html

css

selectize.js