如何创建锚定屏幕右侧而非父容器的绝对定位伪元素

原代码的问题在于固定用5%和100vw/3计算宽度，当容器达到max-width:1000px时，容器两侧的边距不再是5%，而是随视口宽度动态变化的(100vw-1000px)/2，导致蓝色背景无法精准延伸到屏幕右边缘。

以下是两种可行的修正方案：

方案一：使用CSS变量（推荐） #

通过CSS变量动态获取容器的实际宽度，确保计算始终准确：

.container {
  --container-width: min(90vw, 1000px);
  display: flex;
  width: var(--container-width);
  max-width: 1000px;
  margin: 0 auto;
}

.left-column, .right-column {
  min-height: 200px;
  position: relative;
}

.left-column {
  width: calc(100% / 3 * 2);
  background-color: gray;
}

.right-column {
  width: calc(100% / 3);
  align-self: flex-start;
  color: #fff;
}

.right-column:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* 自身宽度 + 容器右边缘到屏幕右边缘的距离 */
  width: calc(100% + (100vw - var(--container-width)) / 2);
  background-color: blue;
  z-index: -1;
}

方案二：纯calc计算 #

不使用变量，直接通过max()处理两种容器宽度场景：

.container {
  display: flex;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.left-column, .right-column {
  min-height: 200px;
  position: relative;
}

.left-column {
  width: calc(100% / 3 * 2);
  background-color: gray;
}

.right-column {
  width: calc(100% / 3);
  align-self: flex-start;
  color: #fff;
}

.right-column:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* 容器未达max-width时取5vw，达max-width时取(100vw-1000px)/2 */
  width: calc(100% + max(5vw, (100vw - 1000px) / 2));
  background-color: blue;
  z-index: -1;
}

HTML部分保持不变：

<div class="container">
  <div class="left-column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed libero nisl, suscipit vel neque eget, luctus ultrices nisl. Fusce non scelerisque magna, quis efficitur nunc. Phasellus vitae faucibus urna. Etiam semper nec ipsum a laoreet. Curabitur eget facilisis risus. Sed at metus ac risus tristique suscipit vitae vel elit. Donec sollicitudin nisi sed sem feugiat pellentesque. Morbi diam urna, posuere id erat quis, bibendum interdum lorem. Sed iaculis, erat eu sagittis lacinia, purus nisl suscipit diam, condimentum tempus neque nibh interdum massa. Suspendisse luctus eget neque sed suscipit. Donec nulla mauris, posuere sit amet velit vel, ullamcorper lobortis nunc. Duis ut pulvinar ipsum. Aenean interdum elementum aliquam. Nulla facilisi.

In egestas, turpis ut sollicitudin laoreet, dolor metus dictum enim, vel laoreet quam urna ac lacus. Nam iaculis felis in malesuada auctor. Nam suscipit pulvinar ipsum. Praesent convallis bibendum felis nec accumsan. Nulla dapibus lorem tortor, ut dapibus odio elementum sed. Nam tempor condimentum nibh. Fusce porta suscipit nisi vitae bibendum. Maecenas euismod ut nisl et imperdiet. Mauris commodo velit id dapibus congue. Vivamus sagittis ante quis augue vestibulum, in vulputate tortor cursus. Praesent congue, elit nec semper finibus, dui metus viverra massa, quis euismod nunc urna consequat dui.</div>
  <div class="right-column">Blue should extend to the edge of the screen</div>
</div>

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