多选Select下拉框顶部内容不可见问题求助

方案1：给select添加滚动限制 #

给带multiple属性的select设置固定高度并开启垂直滚动，让选项在select内部滚动，既不会被modal header遮挡，也不会超出modal范围：

<!-- modal -->
<div>
    <!-- modal header -->
    <div>
        <!-- 头部内容 -->
    </div>
    <!-- modal body -->
    <div>
        <select multiple style="height: 200px; overflow-y: auto;"></select>
    </div>
</div>

推荐用CSS类管理样式，避免内联代码：

.modal-multiple-select {
    height: 200px;
    overflow-y: auto;
}

对应修改select标签：<select multiple class="modal-multiple-select"></select>

方案2：让Modal Body支持滚动 #

如果希望整个modal body区域滚动，而非select内部滚动，可以给modal body设置最大高度和滚动属性，预留出header的空间：

.modal-body {
    max-height: calc(100vh - 150px); /* 数值可根据header高度调整 */
    overflow-y: auto;
}

这样当select选项过多时，整个modal body会滚动，保证所有内容都能被查看。

方案3：排查Modal的定位与溢出设置 #

部分modal组件会通过overflow: hidden或特殊定位截断select的下拉层，检查modal的CSS：

• 不要给modal容器设置overflow: hidden（除非是整体滚动的需求）
• 确保modal的z-index值合理，避免select下拉层被其他元素覆盖

内容的提问来源于stack exchange，提问作者dev-rifaii