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

Question

我有一个框内的下拉菜单。我希望下拉菜单填满整个框。宽度填满了整个框，但我似乎找不到改变下拉菜单高度的方法。

我尝试过使用高度并弄乱填充，但我无法在任何地方找到答案。

<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 1

 <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">

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