使用position: fixed时如何保持div宽度，解决固定定位元素额外宽度问题

问题原因 #

• 普通块级元素未显式设置宽度时，默认值为width: auto，会自动撑满父元素的可用内容宽度（会自动扣除父元素的padding、margin以及浏览器默认给body设置的8px外边距）
• 设置了position: fixed的元素是相对于视口（viewport）定位的，你给它设置的width: 100%是直接取整个视口的宽度，不会自动扣除父元素/body的默认边距，所以视觉上会比普通的.col-1元素更宽，甚至会触发横向滚动条。

解决方案 #

方案1：对齐body默认边距（适配你当前代码场景） #

去掉fixed类的width:100%，改为通过left和right属性设置和body边距一致的偏移，代码修改如下：

.fixed {
    z-index: 9999;
    position: fixed;
    background-color: red;
    margin-top: 100px;
    /* 去掉原有width:100%，新增以下两行 */
    left: 8px;
    right: 8px;
}

如果后续你给body自定义了全局边距，只需要同步修改left和right的值即可。

方案2：用calc动态计算宽度 #

如果需要保留width属性的写法，可以用calc扣除默认的左右边距：

.fixed {
    z-index: 9999;
    position: fixed;
    background-color: red;
    margin-top: 100px;
    width: calc(100% - 16px); /* 16px是body左右各8px的默认边距总和 */
}

方案3：和居中父容器对齐（通用场景） #

如果你的.col-1外层有固定宽度/最大宽度的居中父容器，用这个方案可以保持fixed元素和父容器宽度完全一致：

.fixed {
    z-index: 9999;
    position: fixed;
    background-color: red;
    margin-top: 100px;
    width: 100%;
    max-width: 1200px; /* 和父容器的max-width值保持一致 */
    left: 50%;
    transform: translateX(-50%);
}

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