原生的height属性无效，因其弹出菜单由系统渲染且不响应css；需用div+button+ul模拟下拉结构，并设置max-height、overflow-y及无障碍属性。
原生 <select></select> 的 height 属性基本无效
直接给 <select></select> 设 height: 200px 看似能拉高选中区，但点击后弹出的下拉菜单高度、行高、滚动行为完全不受影响。Chrome / Edge（Chromium 内核）下尤其明显：你压扁了顶部按钮，弹出菜单还是默认显示 8–10 行，内容多时自动加滚动条，且滚动条位置和行高无法用 CSS 控制。
这是因为浏览器把 <select></select> 当作原子控件，渲染分两层：可样式化的“触发区”（<select></select> 本体），和操作系统/浏览器绘制的“弹出层”（popup），后者对 CSS 完全免疫。
-
line-height、padding对弹出菜单无作用 -
appearance: none只能隐藏箭头，不开放弹出层样式权限 - Firefox 相对宽松，Safari 最保守，iOS 上甚至会忽略缩放类 hack
想拉大下拉区域，必须放弃原生 <select></select>
真正可控的方案只有一种：用 <div> + <code><button></button> + <ul></ul> 模拟下拉结构，JS 控制显隐与状态。此时所有尺寸都自由：
-
max-height和overflow-y: auto可直接设在<ul></ul>上，控制可见项数和滚动行为 -
line-height、padding、font-size都能精准调控每项高度 - 宽度可设为
width: 100%或固定值，避免被父容器裁剪 - 必须加
position: absolute+top: 100%+left: 0，并确保父容器有position: relative
别漏掉关键无障碍属性：role="listbox" 放在 <ul></ul> 上，每项 <li> 加 role="option" 和 aria-selected。
常见遮挡或显示不全的真因不是高度，而是层级和溢出
即使你用了自定义下拉，仍可能显示不全——大概率不是高度设小了，而是：
- 外层容器（比如导航栏
<header></header>）设了overflow: hidden，直接裁掉弹出层 - 父级或祖先元素用了
z-index但没配position（static元素无视z-index） - 下拉层
position: absolute的定位上下文错了，飘到页面其他位置 - 移动端未处理
touchstart，导致快速点击时菜单闪退
排查顺序建议：先关掉所有 overflow: hidden，再检查最近的 position: relative 父容器是否存在，最后用浏览器开发者工具看下拉 <ul></ul> 是否被裁切或错位。
超过 30 项时，“拉高高度”是伪需求
硬撑 max-height: 600px 让 100 项全显示出来，只会带来三个问题：
- DOM 渲染卡顿，尤其低端设备上展开慢半拍
- 屏幕阅读器遍历困难，无障碍失败
- 用户根本不会滚到底，反而需要搜索过滤
真实项目里，30 项以上必须引入搜索框 + 键盘过滤（如按字母跳转），而不是靠拉高高度。若坚持展示全部，至少用 visibility: hidden + opacity: 0 替代 display: none，保留 DOM 结构便于焦点管理和动画。
最易被忽略的一点：max-height 值不能只写像素，得结合 line-height 和 padding 推算，比如每项高 40px，最多显示 6 项就该设 max-height: 240px，而不是拍脑袋填 300px。
