原生<select>无法真正高度自适应，因其弹出层脱离DOM流；必须用<div>+<ul>+<li>模拟，并通过max-height+overflow-y:auto+scrollHeight控制。
原生 <select> 无法实现真正意义上的高度自适应——它的下拉弹出层不在 DOM 中，CSS 和 JS 都无法直接测量或约束其高度。必须用 <div>+<ul>+<li> 模拟，再配合 max-height + overflow-y: auto + scrollHeight 才能可靠控制。
为什么直接给 <select> 设 height 或 max-height 失效
因为浏览器把 <select> 拆成两部分渲染：顶部“选中区”可被有限 CSS 影响，但点击后弹出的菜单由操作系统或 UA 绘制，完全脱离当前文档流。你设的 height: 32px 可能只压扁按钮，弹出列表仍固定显示 8–10 行、每行约 24px；max-height 和 overflow 更是直接被忽略。
常见错误现象：
- Chrome 中设了
height，展开后列表高度不变，还出现滚动条错位 - iOS Safari 下点不中过小的选项（系统强制最小触摸热区 44×44px）
- 用
line-height或padding撑高选中区，结果文字截断或居中异常
<ul> 上必须设 max-height，不能设 height
模拟下拉时，滚动容器必须是 <ul> 本身，且只允许用 max-height 限定最大展开高度，同时保持内容自然撑开。设 height 或 min-height 会切断自适应逻辑。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
max-height: 200px是安全上限，超出自动滚动；可写成max-height: calc(5 * 32px)对应 5 行 -
height: 100%在<ul>上可用，因为父级<div class="dropdown">没写死高度，此时100%等价于auto - 绝对不要在父级
.dropdown上设height、min-height或overflow，否则整个弹层会被裁剪 -
overflow-y: auto必须加在<ul>上，不是父容器——否则滚动作用于整块弹层，而非仅选项区
JS 更新选项后，高度没重算？先清 style.height
动态增删 <li> 后，下拉区域卡在旧高度，大概率是 DOM 上残留了 style.height 内联样式，成了硬约束。
- 每次操作前执行
dropdownUl.style.height = 'auto'，强制触发重排 - 读取真实内容高度只能用
scrollHeight（含 padding 和全部内容），别用offsetHeight或clientHeight（它们不含溢出部分） - iOS Safari 对
scrollHeight有微小延迟，用requestAnimationFrame包一层更稳：requestAnimationFrame(() => { ul.style.height = ul.scrollHeight + 'px'; }); - IE11 把
\r\n当一个字符算，导致scrollHeight偏小约 2px；可统一归一化换行符：textContent = textContent.replace(/\r\n/g, '\n')
别漏掉 box-sizing: border-box 和 CSS 上下限兜底
所有涉及高度计算的容器，box-sizing 必须是 border-box，否则 padding 和 border 会让视觉高度和 JS 计算脱节。
-
max-height和min-height必须靠 CSS 提前设好，JS 只负责“当前要多高”，不能替代样式约束 - 移动端注意：iOS Safari 的
scrollHeight在input输入后可能滞后，setTimeout(..., 0)不够，必须用requestAnimationFrame - 真正难的不是写几行 JS，而是接受一个事实：自适应高度的本质是放弃对“弹出层”的控制权，让流式布局和滚动机制接管
