Question

我在框内有一个下拉菜单。我希望下拉菜单填充整个框。宽度填满了整个框，但是我似乎找不到改变下拉菜单高度的方法。我已经尝试过使用高度并弄乱了填充物，但是在任何地方都找不到答案。

Answer 1

也许这就是您所需要的：

#main_dropdown_menu{
  height: 200px;
  background: grey;
}
#main_dropdown{
  height: 100%;
}

<div class="custom_select" id="main_dropdown_menu">
    <select class="dropdown_list" name="list of majors" id="main_dropdown">
      <option value="default" selected="selected" id="submenu">---</option>
      <option value="arts">Arts</option>
      <option value="business">Business</option>
      <option value="engineering">Engineering</option>
      <option value="health">Health</option>
      <option value="humanities">Humanities</option>
      <option value="natural sciences">Natural Sciences</option>
      <option value="social sciences">Social Sciences</option>
    </select>
  </div>

Answer 2

您可以仅在CSS中设置选择框的高度：

cluster[hi]

select.dropdown_list {
  height: 30px;
}

Answer 3

此CSS将解决问题，并根据您的要求进行调整。

select {
   height: calc(1.5em + .75rem + 2px);
   padding: .375rem 1.75rem .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Answer 4

 <select style="position: absolute;" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="dropdown_list" name="list of majors" id="main_dropdown">

这对我来说很好用，您可以根据您希望它出现的位置调整位置。通过将位置声明为绝对，它会将列表向下显示，如果您不声明它，那么它将显示在移动所有其他代码的顶部。

如何调整CSS或Javascript中<select>元素的高度？

4 个答案: