HTML select 最大高度为 100% 且自动调整大小的下拉菜单？

Question

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

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

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

Answer 1

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

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

Answer 2

如果可以 limit the required support to IE9+，您可以使用视口单位 (vh) 将 select 强制始终正好是高度视口，使用此 CSS:

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

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

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

Working fiddle showing it in action.

HTML select 最大高度为 100% 且自动调整大小的下拉菜单？

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

javascript

jquery

html

css