原生 select 在弹窗中无法用 max-height 或 height 限制下拉菜单高度，因其弹出层是系统级组件、脱离文档流且 CSS 无法穿透；唯一跨浏览器有效的原生方案是使用 size 属性控制显示行数，但会失去点击展开交互且移动端可能失效；如需保留交互并限高，必须自定义下拉组件。
原生 select 在弹窗中无法用 max-height 或 height 限制下拉菜单高度——浏览器根本不读这些样式，弹出层是系统级组件，CSS 穿透不了。
为什么给弹窗里的 select 设 max-height 没反应
弹窗容器（比如 div.modal）设了 max-height: 300px，但里面的 select 点开后依然全屏展开或显示 10+ 行，这是因为：
-
select的下拉弹层脱离文档流，不参与父容器的 overflow 剪裁，即使父级有overflow: hidden也拦不住 -
max-height只作用于select元素自身的“可点击区域”，对弹出菜单零影响 - Chrome、Edge、Safari 统一无视对
option的任何尺寸控制；Firefox 虽能用 UA 样式微调，但行为不一致且移动端失效
唯一跨浏览器有效的原生方案：用 size 属性
size 是 HTML 原生属性，它告诉浏览器“默认展开时显示几行选项”，所有主流浏览器都按此渲染弹出菜单高度，并自动加滚动条。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<select size="4"><option>A</option> <option>B</option></select>→ 展开后最多显示 4 行，超出需滚动 -
size="1"等效于普通下拉（隐藏列表），size="0"不合法，会被忽略 - 注意：
size会让select渲染成多行控件（类似textarea），失去“点击才展开”的交互，适合固定展示场景 - 移动端（尤其 iOS Safari）可能无视
size，强制走全屏选择器，此时该方案即失效
要保留点击展开 + 弹窗内限高？必须自定义下拉
放弃 select，用 div+button+ul 模拟，才能真正控制弹出层高度和位置。
立即学习“前端免费学习笔记（深入）”；
- 弹窗容器必须设
position: relative，下拉层（ul）用position: absolute; top: 100%; max-height: 200px; overflow-y: auto - 别忘了监听外部点击、
Escape键、ArrowDown/Up导航，否则键盘用户无法操作 - 必须加
aria-expanded="true/false"和aria-controls，否则屏幕阅读器识别不了状态 - 移动端要额外处理
touchstart和focus同步，iOS Safari 对 focus 触发极不敏感
最容易被忽略的一点：自定义下拉的滚动容器（ul）必须显式设 max-height，且不能依赖父容器的 overflow —— 因为弹出层是绝对定位，它的滚动行为只由自身样式决定。
