HTML选择下拉菜单，最大高度为100%，大小自动

HTML select dropdown menu with max-height of 100% and size automatic?

本文关键字：100% 高度 选择 HTML 下拉菜单      更新时间：2023-09-26

我有一个使用HTML选择标签制作的下拉菜单。我知道有 152 个选项，但如果我要将大小设为 152，那么这个大数字会迫使一些选项在最合理尺寸的显示器上关闭网页视图。我尝试将选择的最大高度设置为 100%，猜测这会将大小限制为div 中可以容纳的最大数量。但是，由于某种原因我不明白，它仍然显示所有 152 个选项，其中一些在屏幕视图下方。

<select name="school" size="152"  style="max-height: 100%;">
...
</select>

有没有办法让选择标签显示尽可能多的选项可以容纳在屏幕上列出（ 100% 高度），但强制您滚动以转到屏幕下方显示的任何选项（超过 100% 高度）？

如果可以将所需的支持限制为 IE9+，则可以使用以下 CSS 使用视口单位 （ vh ） 强制选择始终与视口的高度完全相同：

select {
    display: inline-block;
    height: 100vh;
}

您还必须在select本身上设置至少 2 的 size 属性。 只要您在选择上设置合理的回退size选项，它将在较旧的浏览器上以有限的方式工作，这将简单地忽略100vh值并以默认高度呈现选择。

就是这样！ 唯一真正的缺点是列表将始终是屏幕的高度，如果项目较少，它不会自动缩小。

工作小提琴在行动中展示它。

如果没有某种jQuery替换插件，我会说不。我刚刚检查了Firefox，并且Safari和FF在打开的列表上设置了一个高度，默认情况下，safari只是转到浏览器窗口的底部。

试试Chosen.js，它真的很好，然后你可以从那里设置它：http://harvesthq.github.io/chosen/它甚至提供选项搜索和其他很酷的功能。

相关文章：