layui框架中下拉框被遮挡的问题记录

最新推荐文章于 2025-04-14 15:10:55 发布

梦醒未醒

最新推荐文章于 2025-04-14 15:10:55 发布

阅读量4.2k

点赞数 6

分类专栏： Java #开发问题记录文章标签： html layui dropdown 遮挡 css

本文链接：https://blog.youkuaiyun.com/qq_32760475/article/details/103969425

版权

9 篇文章

订阅专栏

1 篇文章

订阅专栏

本文详细介绍了在使用layui框架进行页面渲染时，如何解决未渲染数据表格导致的dropdown下拉框被遮挡的问题。通过调整下拉框的高度和外部容器的属性，确保下拉框在任何情况下都能正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示，layui在页面渲染时，如果不渲染数据表格的话，会将其上方的下拉框给挡住。因为这个问题遇到很多次，因此记录下来。

下拉框使用的是jq插件dropdown，数据表格及页面渲染都是使用layui。

首先第一步是将dropdown的下拉框高度调长，不再是默认的长度。

.dropdown-main ul {
     max-height: 250px !important;
}

第二步将外部容器设置为根据外部大小变化。

<body style="overflow: auto">
    <div class="content"style="overflow: visible">
        ...
    </div>
</body>

这是因为数据表格如果默认不显示数据的话，外部容器的大小其实只包裹住原html内容，而下拉框的渲染其实类似于在某个坐标上贴上一层内容，实际上还是在该容器内，如果不动态把容器撑大，就会被挡住。