原生select无法大面积展开，需用div+ul+JS模拟；父容器设position:relative，下拉层用position:absolute并设top:100%、left:0、width:100%；须兼顾click与focus事件，加键盘导航和移动端touch处理；超30项需搜索过滤、虚拟滚动及ARIA属性以保障性能与可访问性。
下拉菜单撑不满父容器的常见原因
HTML 原生 select 元素天生不支持大面积展开——它默认只渲染一个固定高度的控件，点击后弹出的选项列表由操作系统或浏览器原生绘制，无法用 CSS 控制尺寸、位置或宽度。所谓“大面积下拉”，实际是放弃 select，改用 div + ul + JavaScript 模拟的自定义下拉。
用 position: absolute 实现可扩展的下拉区域
核心是脱离文档流，让下拉内容能自由延展。但必须确保父容器有 position: relative 作为定位上下文，否则 absolute 会相对于视口或最近的定位祖先错位。
常见错误现象：ul 下拉层飘到页面顶部或右侧、滚动时错位、响应式断点下宽度崩塌。
- 父容器（如
div.dropdown）必须设position: relative - 下拉层（如
ul.dropdown-menu）用position: absolute; top: 100%; left: 0; width: 100% - 如果需要铺满整行（比如导航栏下拉），
width改为具体像素值或min-width: 100%，避免内容收缩 - 加
transform: translateY(-1px)可微调消除与触发按钮间的缝隙
focus 和 click 事件在下拉交互中的取舍
纯 click 在移动端容易误触；仅靠 focus 在桌面端又无法支持鼠标操作。真实项目中得两者兼顾，且要处理键盘导航（Tab/↑↓/Enter）。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：blur 事件触发太早（比如点击下拉项时先失焦再执行）、移动端 touchstart 未阻止默认行为导致快速闪退。
- 用
click控制展开/收起，但收起逻辑不能只依赖blur - 监听
document的click，检查点击目标是否在下拉区域外，再收起 - 对下拉项加
tabindex="0"，支持键盘聚焦；按Enter或Space触发选择 - 移动端需加
touchstart并调用event.preventDefault()防止延迟 300ms
大尺寸下拉菜单的性能与可访问性底线
下拉项超过 50 条时，原生 DOM 渲染会卡顿；屏幕阅读器也难以遍历长列表。这不是样式问题，是结构设计问题。
性能影响：每次展开都重绘整个 ul，无虚拟滚动则内存和帧率直线下滑。
- 超过 30 项必须加搜索过滤，而不是堆高
max-height - 不要用
display: none控制显隐——保留 DOM 但用visibility: hidden+opacity: 0更利于动画和焦点管理 - 给下拉容器加
role="listbox"，每项加role="option"和aria-selected，否则屏幕阅读器读不出状态 - 避免在
scroll事件里直接操作 DOM；用IntersectionObserver或节流控制可视区渲染
真正难的不是让它“看起来大”，而是让大尺寸下拉在各种设备、各种交互方式、各种辅助技术下都不掉链子。多数人卡在第一步就停了——以为加个 width: 100vw 就算“大面积”了。
