设置bottom:-5px后下拉选项列表出现额外底部白边如何解决

针对你遇到的下拉菜单底部出现额外白边的问题，结合你的CSS代码，可尝试以下几种修复方案：

1. 移除冗余定位属性，解决布局冲突 #

你的代码同时使用了bottom:-5px和transform: translateY(100%)，两个定位属性叠加可能导致元素偏移异常，进而出现底部白边。建议保留其中一种定位逻辑即可：

方案A：保留transform实现下拉定位 #

.dropdown-options{
    position:absolute;
    left:0px;
    transform: translateY(100%);
    width:100%;
    background-color: white;
    border-radius: 0px 0px 16px 16px;
}

方案B：改用bottom定位移除transform #

.dropdown-options{
    position:absolute;
    bottom:0;
    left:0px;
    width:100%;
    background-color: white;
    border-radius: 0px 0px 16px 16px;
}

2. 修正盒模型计算逻辑 #

如果元素的box-sizing未设置为border-box，宽度计算可能包含内边距或边框，导致视觉上出现白边。添加以下属性：

.dropdown-options{
    /* 原有属性 */
    box-sizing: border-box;
}

3. 检查父元素样式影响 #

• 确认父元素是否设置了padding-bottom或border-bottom，这类样式可能透过下拉列表显露，造成白边错觉；
• 父元素若设置了overflow属性，可能截断下拉列表区域，引发显示异常。

4. 消除背景色溢出 #

若border-radius导致背景色在边角溢出，可添加overflow: hidden约束：

.dropdown-options{
    /* 原有属性 */
    overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Iram Kahkashan