CSS导航栏设width:100%加padding后超出屏幕问题求助

AI 小北

2026-7-31

问题解决：固定导航栏padding导致宽度超出视口

原因分析

这个问题源于CSS盒模型的默认行为：

默认情况下，元素的width属性仅计算内容区域的宽度，不包含内边距（padding）和边框（border）。
当你给.top-nav设置width: 100%加上padding: 10px时，元素总宽度会变成100% + 20px（左右各10px内边距），超出了视口宽度，所以右侧内容被挤出屏幕，浏览器会显示right: -20px来修正溢出。

解决方案

有两种常用方法可以解决这个问题：

方法1：使用`box-sizing: border-box`

给.top-nav添加box-sizing: border-box属性，让元素的width包含内边距和边框。这样设置width:100%时，内边距会从内容区域中扣除，不会超出视口：

header .top-nav {
    padding: 10px;
    margin: 0;
    position: fixed;
    width: 100%;
    background-color: aqua;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box; /* 新增该行 */
}

方法2：移除`width:100%`，利用固定定位特性

固定定位元素若不设置宽度，会自动收缩包裹内容，但你可以通过left:0和right:0让它占满整个视口宽度，同时内边距不会导致溢出：

header .top-nav {
    padding: 10px;
    margin: 0;
    position: fixed;
    left: 0; /* 新增 */
    right: 0; /* 新增 */
    /* 移除 width:100% */
    background-color: aqua;
    display: flex;
    align-items: center;
    justify-content: space-between;
}