CSS实现电视指南：如何让滚动容器内的实时线贯穿底部？

核心思路 #

将实时线绑定到节目列表容器上，让它的高度自动匹配动态生成的节目列表总高度，解决垂直滚动时线无法覆盖全部内容的问题。

修复后的基础实现代码 #

<style type="text/css">
  .wrapper {
    height: 150px;
    width: 400px;
    overflow: scroll;
    /* 移除relative定位，避免限制实时线高度 */
  }
  .list {
    position: relative; /* 作为实时线的定位基准容器 */
  }
  .line {
    width: 3px;
    background: blue;
    position: absolute;
    left: 200px;
    top: 0;
    bottom: 0; /* 此时高度匹配节目列表总高度，而非容器可视高度 */
    z-index: 200;
  }
  .list > div {
    width: 600px;
    height: 50px;
    margin: 5px;
    background: red;
  }
</style>

<div class="wrapper">
  <div class="list">
    <div class="line"></div> <!-- 将实时线移入节目列表容器内 -->
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>

原理说明 #

• 原代码中.wrapper的position:relative会把实时线的高度限制在容器可视范围内，滚动时无法覆盖下方未显示的节目内容。
• 把.list设为position:relative后，实时线的top:0; bottom:0会自动匹配节目列表的总高度（动态内容高度），垂直滚动时线会贯穿所有节目项。
• 水平滚动时，实时线会跟随时间轴内容同步移动，符合电视节目表中“实时线对应固定时间点”的逻辑。

补充：实时线固定在可视区域（不随水平滚动移动） #

如果需要实时线始终停留在容器的某个水平位置（比如可视窗口固定位置），可以用双层滚动容器实现：

<style type="text/css">
  .outer-wrapper {
    height: 150px;
    width: 400px;
    position: relative;
    overflow-y: scroll; /* 外层仅处理垂直滚动 */
  }
  .inner-wrapper {
    width: 600px; /* 匹配节目项宽度，处理水平滚动 */
    overflow-x: scroll;
  }
  .line {
    width: 3px;
    background: blue;
    position: absolute;
    left: 200px; /* 固定在可视区域的水平位置 */
    top: 0;
    bottom: 0;
    z-index: 200;
    pointer-events: none; /* 避免遮挡节目项的交互操作 */
  }
  .list > div {
    height: 50px;
    margin: 5px;
    background: red;
  }
</style>

<div class="outer-wrapper">
  <div class="line"></div>
  <div class="inner-wrapper">
    <div class="list">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
</div>

这种结构下，外层负责垂直滚动，实时线固定在外层容器的水平位置；内层负责水平滚动节目内容，垂直滚动时线会贯穿所有频道。

内容的提问来源于stack exchange，提问作者What-About-Bob