如何为CSS Grid右侧列添加独立垂直滚动？

问题出在overflow-y: scroll需要容器有明确的高度限制，否则容器会随内容自动撑开，不会触发滚动效果。以下是可行的解决方案：

关键修改步骤 #

• 重置页面根元素的默认边距，避免全局滚动条干扰
• 给右侧栏设置固定高度（如占满视口高度），并启用垂直滚动
• 添加粘性定位，让右侧栏在左侧内容滚动时保持固定

修改后的完整代码 #

CSS #

/* 重置页面默认样式，确保容器高度计算准确 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

.main-container {
  display: grid;
  width: 100%;
  gap: 1rem;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main-content-section feed-section";
  /* 让网格容器至少占满视口高度 */
  min-height: 100vh;
}

.main-content {
  grid-area: main-content-section;
  background-color: gray;
  /* 左侧内容过多时，触发页面全局滚动 */
  min-height: 100%;
}

.feed-section {
  grid-area: feed-section;
  width: 300px;
  background-color: red;
  /* 限制右侧栏高度为视口高度 */
  height: 100vh;
  /* 固定右侧栏在视口顶部，不随页面滚动 */
  position: sticky;
  top: 0;
  /* 内容超出时显示垂直滚动条，内容不足时隐藏 */
  overflow-y: auto;
}

HTML #

<div class="main-container">
  <div class="main-content">
    <p>Hello World!</p>
    <!-- 可添加更多内容测试左侧滚动效果 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="feed-section">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 4</p>
    <p>Item 5</p>
    <p>Item 6</p>
    <p>Item 7</p>
    <p>Item 8</p>
    <p>Item 9</p>
    <p>Item 10</p>
    <p>Item 11</p>
    <p>Item 12</p>
    <p>Item 13</p>
    <p>Item 14</p>
    <p>Item 15</p>
    <p>Item 16</p>
    <p>Item 17</p>
    <p>Item 18</p>
    <p>Item 19</p>
    <p>Item 20</p>
  </div>
</div>

效果说明 #

• 左侧主内容区内容增多时，触发页面全局滚动
• 右侧用户动态区固定在视口内，内容超出时仅自身显示垂直滚动条，不随页面滚动

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