如何设置粘性.page-header宽度，让导航栏始终显示在窗口右侧？

要让.page-header的导航始终固定在视口右侧，同时在水平/垂直滚动时保持粘性，关键是让header脱离父容器的宽度限制，直接以视口宽度为基准布局：

修改后的CSS代码 #

.pageWrapper {
  width: max-content;
}

.page-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw; /* 强制匹配视口宽度 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  background-color: #ffffff;
  z-index: 100;
  box-sizing: border-box; /* 内边距不额外增加宽度 */
}

.logoHeader {
  width: 100px;
  height: 50px;
  background-color: #cccccc;
}

.nav {
  width: 300px;
  height: 50px;
  background-color: #dddddd;
}

.page-content {
  width: 2000px; /* 模拟超宽内容 */
  height: 1000px;
  background-color: #f5f5f5;
}

核心设置说明 #

1. width: 100vw：让header宽度严格等于当前视口宽度，不受父容器max-content的影响，确保导航能对齐视口右侧。
2. Flex布局：display: flex; justify-content: space-between 快速实现logo左对齐、导航右对齐的效果，无需复杂定位。
3. 粘性定位优化：position: sticky; top: 0; left: 0 同时保证垂直滚动时header固定在顶部，水平滚动时header不随父容器偏移，始终留在视口内。
4. 细节处理：box-sizing: border-box 避免内边距撑开header宽度；背景色和z-index防止下方内容滚动时覆盖header。

如果需要适配移动端（部分浏览器滚动条会占用视口宽度），可以将width: 100vw替换为width: 100dvw（动态视口宽度，现代浏览器均支持）。

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