当页面大小改变时，select 下拉菜单超出页面，是否能将超出的不显示在最上层

moerxinx 2010-07-02 11:56:55

我想要将超出的部分不显示在最上层，应该如何设置CSS？

...全文

453 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

moerxinx 2010-07-02

打赏
举报

[Quote=引用楼主 moerxinx 的回复:]
我想要将超出的部分不显示在最上层，应该如何设置CSS？
[/Quote]
是的，我表达的不够清楚。
不可控吗？那不是有些页面缩小后，下拉菜单就显的比较丑了

孟子E章 2010-07-02

打赏
举报

这个好像无法控制的，是显示在浏览器窗口的外面的，不是页面的外面

资源下载链接为： https://pan.quark.cn/s/d9ef5828b597 在 Vue.js 开发中，ElementUI 是一款广受欢迎的前端组件库，提供了诸如 Select 和 Cascader 等丰富组件，用于构建用户界面。但在使用过程中，可能会遇到一些问题，比如 Select 的下拉选项（el-option）在页面滚动时超出元素区域，以及 Cascader 的级联选择器滚动超出其容器，这些问题都会影响用户体验。对于 Select 下拉选项超出区域的问题，通常是因为 CSS 定位设置不当。ElementUI 的 Select 组件默认采用绝对定位，当页面滚动时，下拉选项可能会超出可视范围。解决方法有以下几种：一是调整 z-index 值，确保 Select 组件的 z-index 高于其他元素，让下拉菜单始终显示在最上层；二是使用 ElementUI 提供的 popper-append-to-body 属性，将其设置为 false，使下拉菜单相对于 Select 组件定位，而不是整个 body；三是通过自定义 CSS 覆盖默认样式，比如将下拉菜单的定位改为相对定位，并调整其位置，使其在滚动时能够正确显示。对于 Cascader 级联选择器滚动超出的问题，原因可能是其内部滚动条高度计算不准确或未正确限制。解决方法包括：一是检查 Cascader 父级元素的 overflow-y 属性，避免因设置为 auto 或 scroll 导致滚动条超出预期，可设置合适高度并启用垂直滚动；二是利用 ElementUI 的 :panel-style 属性自定义面板样式，限制面板高度并添加滚动条；三是如果 Cascader 容器是响应式的，可使用 CSS Flexbox 或 Grid 布局来更好地控制子元素大小和排列，避免滚动条溢出；四是检查级联数据是否过于庞大，考虑分页

先简述一下问题： bootstrap dropdown的显示会根据你设备的高度来决定，默认会显示在下方，如果下方视图不够的话会显示到上方然后显示到上方的话就会有个问题，设备高度不够的话，比较靠上的选项就会显示不全。总共有两种办法解决这个问题通过添加css样式来解决 .dropdown-menu { max-height: calc( 100vh - 100px ); overflow-y: auto; } 原理是固定dropdown的最大高度，如果超出高度会出现滚动条，避免出现菜单过长

之前工作的时候碰到一个问题，做滚动时因为html的select这个控件会显示在任何控件之前，式样一直做不好，当时的解决方法是用js写了个控件代替了单纯的select标签，让它在影响界面时做些处理。后来和一个前台高手共事，我发现了最好的解决方法就是用iframe去框住这个select标签使之不会超出其他控件，方法如此，具体百度，这边只是做个记号以免以后忘记.

简单实现可以编辑的下拉菜单

在IE中,select属于window类型控件，它会“挡住”所有非window类型控件可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上，而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，比如iframe和其他的sel

CSS

61,126

社区成员

60,707

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章