fixed导航栏在小设备设为100% width仍超出屏幕的问题

问题描述 #

在屏幕宽度≤767px的移动设备中，将fixed定位的导航栏.edit-nav宽度设为100%后，导航栏依然超出屏幕范围，出现横向滚动条。

问题原因 #

1. 盒模型计算逻辑：默认box-sizing: content-box规则下，元素宽度仅计算内容区域，导航栏自带的p-2内边距会额外增加总宽度，导致width:100% + padding的实际宽度超出屏幕。
2. Fixed定位偏移：未设置left/right偏移的fixed元素，可能因浏览器默认定位规则出现偏移，视觉上超出屏幕边界。

解决方案 #

修改CSS代码，调整盒模型和定位规则：

.edit-nav, .upgrade-nav {
    border-radius: 15px;
    width: 500px;
    height: 52px;
    position: fixed;
    z-index: 1200;
    box-sizing: border-box; /* 让宽度包含内边距和边框 */
}
.nav-tab-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
           
@media (max-width: 767px){
    .edit-nav {
         border-radius: 0;
         width: 100%;
         height: auto;
         text-align: center;
         left: 0; /* 固定导航栏左边缘 */
         right: 0; /* 固定导航栏右边缘 */
         box-sizing: border-box; /* 确保移动端应用盒模型 */
    }
    .nav-Section {
        display: block;
        height: 160px;
    }
    .account-nav {
        position: relative;
        right: 0;
    }
}

效果说明 #

• box-sizing: border-box：让导航栏的宽度计算包含内边距，设置width:100%时不会因p-2的内边距导致总宽度溢出。
• left: 0 + right: 0：强制fixed导航栏贴合屏幕左右边缘，比单纯设置width:100%更适配不同移动设备的屏幕尺寸。

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