粘性导航栏超出右侧边距问题求助

问题根源 #

当导航栏添加.sticky类变为fixed定位后，width:100%是相对于浏览器视口计算的，而body设置了3em的左右外边距，导致固定后的导航栏会撑满整个视口宽度，自然超出body的内容区域范围。

解决方案 #

修改.sticky类的样式，去掉width:100%，改用left和right属性匹配body的外边距，让导航栏宽度自动适配body的内容区域：

body {
  margin: 3em;
}
#navbar {
  overflow: hidden;
  background-color: #333;
  /* 确保非固定状态下导航栏不超出body */
  max-width: 100%;
}
.sticky {
  position: fixed;
  top: 0;
  /* 匹配body的左右margin */
  left: 3em;
  right: 3em;
}

如果后续body的外边距可能修改，推荐用CSS变量统一管理，避免重复调整样式：

:root {
  --body-margin: 3em;
}
body {
  margin: var(--body-margin);
}
#navbar {
  overflow: hidden;
  background-color: #333;
  max-width: 100%;
}
.sticky {
  position: fixed;
  top: 0;
  left: var(--body-margin);
  right: var(--body-margin);
}

为什么之前的尝试无效？ #

你添加的width:100%和box-sizing:border-box无法解决问题，因为fixed定位的元素宽度参考系是视口而非父元素body，box-sizing仅影响元素自身内边距、边框是否计入宽度，无法改变定位参考系带来的宽度计算规则。

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