求助：使用Tailwind CSS实现多列同步滚动时内容超出边框

核心问题分析 #

你的布局问题出在列容器的高度设置和内容溢出控制上，具体两点：

1. 列的高度没有完全绑定到视口高度，导致部分列高度不统一
2. 内容容器缺少合适的溢出规则，使得内容突破了边框限制

具体修复步骤 #

• 给每个列容器添加h-screen类，强制让所有列高度和屏幕高度保持一致
• 在列内部的内容容器上添加h-full和overflow-y-auto类，让内容在列的范围内滚动，同时保留边框的完整性
• 保留当前的滚动监听逻辑即可，只要所有列的内容容器高度统一，同步滚动的效果就能正常生效

关键代码调整示例 #

<!-- 列容器修改 -->
<div class="col h-screen border-r border-gray-200">
  <!-- 内容容器修改 -->
  <div class="h-full overflow-y-auto" id="day-1">
    <!-- 原有内容 -->
  </div>
</div>

额外注意事项 #

• 如果页面有全局的margin或padding，记得给最外层容器加上overflow-hidden，避免出现多余的全局滚动条
• 确保所有列的内容容器结构完全一致，否则同步滚动可能出现偏差

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