如何让CSS fixed定位的分隔线不溢出.page-content容器？

可以通过纯CSS实现，核心思路是利用CSS滚动驱动动画或绝对定位容器+sticky定位来限制红色分隔线的显示范围，以下是具体实现方案：

方案一：CSS滚动驱动动画（推荐，现代浏览器支持） #

利用滚动驱动动画，根据页面滚动位置动态调整红色分隔线的裁剪区域，当滚动到.page-content底部时，自动裁剪掉溢出footer的部分。

修改后的CSS代码：

body,
html {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  scroll-timeline: --page-scroll block; /* 绑定页面滚动行为 */
}

.page-content {
  position: relative;
  min-height: 100vh;
  background: #eee;
  z-index: 1;
}

.content {
  padding: 2em;
}

.vertical-separator {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background-color: #fff;
  z-index: 2;
}

.half-vertical-separator {
  position: fixed;
  top: 0;
  left: 50%;
  width: 3px;
  height: 50vh;
  background-color: red;
  z-index: 3;
  /* 根据滚动位置裁剪元素 */
  animation: clip-separator linear;
  animation-timeline: --page-scroll;
  animation-range: contain 0% contain 100%;
}

.page-footer {
  background: #444;
  color: #eee;
  position: sticky;
  bottom: 0;
  height: 100vh;
}

/* 滚动到页面底部时裁剪红色分隔线 */
@keyframes clip-separator {
  to {
    clip-path: inset(0 0 100vh 0);
  }
}

原理：

• 定义scroll-timeline绑定页面滚动行为
• 通过animation-range指定动画仅在.page-content的滚动范围内生效
• 滚动到.page-content底部时，clip-path将红色分隔线的底部裁剪100vh（即footer的高度），使其不再溢出

方案二：绝对定位容器+sticky定位（兼容更多浏览器） #

将红色分隔线放入一个与.page-content同范围的绝对定位容器中，利用容器的overflow:hidden限制显示，同时给红色分隔线设置sticky定位保持顶部固定。

修改后的HTML #

<div class="page-content">
  <div class="separator-container">
    <div class="half-vertical-separator"></div>
  </div>
  <div class="vertical-separator"></div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
</div>
<div class="page-footer">
  <div class="content">Footer</div>
</div>

修改后的CSS #

body,
html {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.page-content {
  position: relative;
  min-height: 100vh;
  background: #eee;
  z-index: 1;
}

/* 新增容器：覆盖整个.page-content，用于裁剪内部元素 */
.separator-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none; /* 不干扰页面交互 */
}

.content {
  padding: 2em;
}

.vertical-separator {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background-color: #fff;
  z-index: 2;
}

.half-vertical-separator {
  position: sticky;
  top: 0;
  left: 50%;
  width: 3px;
  height: 50vh;
  background-color: red;
  z-index: 3;
  margin-left: -1.5px; /* 精确居中 */
}

.page-footer {
  background: #444;
  color: #eee;
  position: sticky;
  bottom: 0;
  height: 100vh;
}

原理：

• .separator-container绝对定位覆盖整个.page-content，overflow:hidden确保内部元素不会超出.page-content范围
• 红色分隔线用sticky定位，保持顶部固定的同时，会被容器的overflow:hidden裁剪，当.page-content滚动到底部时，分隔线会随容器一起被隐藏，不会溢出到footer

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