Html Select "size" 问题

Question

此处显示的 select 元素（具有固定宽度）有 3 个选项，size 为 3。因此它应该完全适合内容。但是，它似乎在底部保留了足够的 space ，以便能够显示所有 option 具有相同高度的元素，这并不需要。（运行要查看的代码片段。）

有什么方法可以解决这个问题，让最后一个 option 之后没有多余的 space 吗？

.myClass select 
{
    width: 150px;
}

.myClass option{
   white-space: normal;
}

<div class="myClass">
    <select name="mySelect" size="3">
        <option>1</option>
        <option>2 This options is very long so we wrap the text. That causes the select to show extra blank space at the bottom!</option>
        <option>3</option>
    </select>
</div>

编辑

从评论来看，浏览器的显示方式似乎有所不同。

Answer 1

如果 Chromium 团队无法解决问题，您可以使用以下方法作为解决方法。

您可以计算选项的总高度，然后将其设置为<select>的高度：

var options = document.getElementsByTagName("option");
var opheight = 0;
for (i = 0; i < options.length; i++) {
  opheight += options[i].offsetHeight;
}
document.getElementsByTagName("select")[0].style.height = opheight + "px";

.myClass select {
  width: 150px;
}

.myClass option {
  white-space: normal;
}

<div class="myClass">
  <select name="mySelect" size="3" id="mySelect">
    <option>1</option>
    <option>2 This options is very long so we wrap the text. That causes the select to show extra blank space at the bottom!</option>
    <option>3</option>
  </select>
</div>

Html Select "size" 问题

Html Select "size" issue

html

html-select

google-chrome

microsoft-edge