如何让HTML/CSS中的导航栏不受body内边距影响？

你的问题出在float:right和默认盒模型的组合上：float:right会让导航栏的布局基于body的内容区（即去掉padding-left:100px后的区域），再加上width:100%，导航栏的宽度被限制在body内容区内，此时负外边距无法生效。下面是几种可行的解决方法：

方案一：绝对定位导航栏 #

通过绝对定位让导航栏脱离文档流，直接基于视口布局，完全不受body内边距影响：

html {
    height: 100%;
}
.topnav {
    background-color: rgb(15, 25, 75);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
}
body {
    background-color: rgb(255, 255, 255);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-left: 100px;
    padding-top: 50px; /* 避免内容被导航栏遮挡，值根据导航栏高度调整 */
}

方案二：调整布局结构（推荐） #

把body的内边距转移到内容容器上，让导航栏直接占满body宽度，这种方法更符合语义化和布局逻辑：

html {
    height: 100%;
}
.topnav {
    background-color: rgb(15, 25, 75);
    overflow: hidden;
    width: 100%;
    padding: 0;
}
body {
    background-color: rgb(255, 255, 255);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 移除body的padding-left */
}
.content-container {
    padding-left: 100px; /* 把原body的内边距移到这里 */
    min-height: calc(100% - 50px); /* 可选，适配内容区域高度，50px为导航栏高度 */
}

在HTML中，将除导航栏外的所有内容放入<div class="content-container"></div>即可。

方案三：负margin配合盒模型（快速修复） #

去掉float:right，用calc()计算导航栏宽度，同时设置box-sizing:border-box确保宽高包含内边距和边框：

html {
    height: 100%;
}
.topnav {
    background-color: rgb(15, 25, 75);
    overflow: hidden;
    width: calc(100% + 100px); /* 宽度=body内容区宽度 + body的padding-left值 */
    margin-left: -100px; /* 负外边距抵消body的padding-left */
    padding: 0;
    box-sizing: border-box; /* 避免宽度溢出 */
    /* 移除float:right */
}
body {
    background-color: rgb(255, 255, 255);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-left: 100px;
}

注意：这种方法依赖body的padding-left具体数值，后续修改时需要同步调整导航栏的宽度和外边距，维护成本较高。

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