html - 选择下拉列表可能到 "Drop-Up"

Question

<select><option>foo</option></select>下拉菜单太靠近页面底部。我想下拉到“下拉”。我一直在搜索，但只能在导航菜单上找到信息。我试着给 <select class="select-store"> top:100% 和 bottom:100% 是 position:absolute ，这是我看到的导航菜单下拉菜单“下拉”而不占优势的情况。这可能吗？提前谢谢大家，代码在下面；

HTML

<select class="select-store" onchange="document.location.href=this.value">
  <option value="/">Store Finder</option>
  <option value="/foo">foo</option>
  <option value="/beta">beta</option>
</select>

CSS

#finder .select-store{
  background: url("/images/storefinder_bg.png") no-repeat scroll 0 0 transparent;
  border: medium none;
  color: #5B5A5A;
  font-family: UNIV-C,Arial,Helvetica,sans-serif;
  font-size: 16px;
  font-weight: normal;
  height: 32px;
  line-height: 16px;
  padding: 3px;
  vertical-align: middle;
  width: 186px;
}

Answer 1

SELECT 元素的行为由浏览器决定。它单独检测视口(viewport)外的溢出，有时会重新定位列表。您无法直接控制它。

现在，如果您使用基于脚本的模拟 SELECT，您可以检测 JS 代码中的溢出并相应地重新定位。