如何在保留body固定宽度且不包裹主内容时实现header全屏宽度

你只需要修改#header的CSS样式即可实现需求，无需改动现有HTML结构，也不需要给主内容新增任何包裹容器：

div#header {
    padding: 20px 20px;
    background-color: palegoldenrod;
    /* 新增以下样式即可 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    box-sizing: border-box;
}
/* 如果出现横向滚动条，可给body新增这一行，原有body样式全部保留 */
body {
    overflow-x: hidden;
}

原理解释 #

• width: 100vw直接让header的宽度等于浏览器视口的完整宽度，不受body固定宽度的限制
• left: 50%将header的左边缘移动到body的水平中点位置
• transform: translateX(-50%)将header自身向左偏移自身宽度的50%，实现header整体与视口水平对齐
• box-sizing: border-box保证header的内边距不会撑宽容器，避免宽度超过100vw

符合要求验证 #

1. 完全不需要修改现有HTML结构，header外的主内容不需要包裹任何额外容器
2. 仅通过CSS实现，没有额外逻辑，布局非常简单
3. 原有body的固定宽度、内边距等设置全部保留，主内容的渲染逻辑完全不受影响

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