为.right-column添加position: fixed后宽度不符合预期的问题求助

嘿，这个定位坑我碰到过好多次！当你给.right-column加上position: fixed后，它就脱离了原来的文档流，不再受父容器.right-column-wrapper的布局约束了——fixed定位的元素是相对于浏览器视口来计算尺寸和位置的，所以原来的width: 50%自然就变成了视口宽度的一半，而不是父容器的一半。

具体解决步骤 #

我们可以通过CSS的calc()函数手动计算正确的宽度，同时调整定位属性，让固定栏保持和原布局一致的尺寸与位置：

1. 修改.right-column的CSS样式：

.page-wrapper .right-column-wrapper .column.right-column {
  position: fixed;
  top: 0;
  right: 0;
  /* 计算宽度：视口总宽度减去左侧导航的88px，再取一半 */
  width: calc((100vw - 88px) / 2);
  height: 100vh; /* 让高度占满整个视口 */
  background: url(https://i.imgur.com/4Mmj0E8.jpg);
  background-size: cover;
  background-position: center;
}

2. 给左侧栏添加margin，避免内容被固定栏遮挡：
   因为fixed元素脱离了文档流，不会再占据布局空间，左侧的.left-column会自动撑满整个.right-column-wrapper，所以需要手动留出右侧固定栏的宽度：

.page-wrapper .right-column-wrapper .column.left-column {
  margin-right: calc((100vw - 88px) / 2);
}

原理说明 #

• 100vw代表浏览器视口的总宽度，减去左侧导航的88px后，就是.right-column-wrapper原本的可用宽度，再除以2就得到了和原布局一致的50%宽度。
• top: 0和right: 0让固定栏定位在页面右上角，和原来的布局位置完全匹配。
• 给左侧栏添加margin-right是为了避开固定栏的空间，保证左侧内容不会被固定栏覆盖，同时保持正常的滚动功能。

这样修改后，右侧栏就能固定在页面右侧，同时宽度和原布局完全一致啦！

内容的提问来源于stack exchange，提问作者sales.bzielinski