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

mel*_*erd 5 html javascript css jquery selectize.js

美好的一天!

我使用“选择”插件进行下拉选择。我如何基于屏幕高度设置下拉菜单内容的高度,因为下拉菜单中有很多项目,将它们显示在比短列表更长的列表中会很好。

目前我所拥有的。 在此处输入图片说明

期望的输出

在此处输入图片说明

我尝试使用下面的代码,只是从在控制台上播放而已,但是它也不起作用。

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

}
Run Code Online (Sandbox Code Playgroud)

任何建议,谢谢!

mel*_*erd 5

我设法达到了期望的输出

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

.selectize-dropdown-content{
    max-height: 100% !important;
    height: 100% !important;
}
Run Code Online (Sandbox Code Playgroud)