原生 的 height 无法按比例设置，因其弹出层由系统绘制、不受 css 控制；可行方案只有调整选中区视觉高度或改用自定义下拉组件。

height 对原生 <select></select> 无效，所谓“按比例设置高度”在技术上不可行——浏览器不把下拉弹出层（popup）当作 CSS 可样式化的内容区域，它由操作系统或 UA 控件绘制，height、line-height、max-height 全部被忽略。

为什么 height: 50% 或 height: calc(100% - 20px) 在 <select></select> 上没反应

根本原因是：原生 <select></select> 是替换元素（replaced element），其渲染分两层——顶部可样式化的“选中区”和底层不可穿透的“弹出菜单”。你设的百分比高度只可能作用于前者，而用户真正关心的下拉项列表高度完全不受控。Chrome / Edge 下甚至会把 height: 50% 解释为“相对于父容器 50%”，但弹出层仍按系统默认行高（通常 24–32px）显示固定行数（约 8–10 行），不会随比例缩放。

想让下拉项数量“看起来”按比例变化？别碰 <select></select> 的 height

可行路径只有两个，且都绕开原生限制：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 用 padding + font-size 微调选中区视觉高度（仅影响顶部按钮区，不影响弹出项数）
• 改用自定义下拉组件（<div> + <code><ul></ul> + JS），此时 max-height: 60%、height: calc(100vh - 200px) 等全部生效

  例如，一个轻量自定义下拉的弹出层可这样写：

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 60vh;     /* ✅ 真正按视口比例控制最大高度 */
    overflow-y: auto;
    background: #fff;
  }

  如果必须用原生 <select></select>，怎么间接影响弹出项“可见行数”

  没有直接方式，但有两点现实约束可帮你预估：

  • 各浏览器默认弹出高度大致固定：Chrome/Edge 约 240–300px，Firefox 约 280px，Safari 最小（常只显示 5–6 行）
  • <option></option> 标签内容长度会影响换行，但不会改变行高；长文本只会触发单行省略或撑宽下拉框宽度，而非增加高度
  • 移动端（iOS Safari / Android Chrome）的原生下拉是全屏 modal，height 和比例更无意义——它根本不走 CSS 渲染管线

  所以，“按比例设置下拉高度”这个需求本身，就暗示你应该放弃原生 <select></select>。真要响应式控制，唯一可靠出口是自定义实现——否则你调的每个百分比，最终都只是在调试一个不可见的、系统级的黑盒。