HTML选择下拉菜单，最大高度为100％，大小自动？答案

【问题标题】：HTML select dropdown menu with max-height of 100% and size automatic?HTML选择下拉菜单，最大高度为100％，大小自动？
【发布时间】：2015-01-03 08:37:13
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果你可以limit the required support to IE9+，你可以使用视口单位（vh）强制选择总是正好是视口的高度，使用这个CSS：

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

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

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

Working fiddle showing it in action.

【讨论】：

【解决方案2】：

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

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

【讨论】：