CSS布局问题：跨两行侧边栏的背景设置与高度自适应实现

核心修改思路 #

1. 用全局网格容器包裹两个section，让侧边栏跨两行，自动适配第二个section的内容高度
2. 利用伪元素实现第一个section的全屏渐变+图片背景
3. 通过绝对定位+CSS变量实现视口宽度的顶部背景元素

修改后的完整代码 #

HTML

<div class="main-grid">
  <aside class="sidebar">
    <h1>Sidebar Title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, id quae ut itaque architecto sunt odit exercitationem sed illum impedit maxime placeat ducimus. Quae dicta aliquid assumenda minus voluptates quo repellendus dolores eum ea veritatis ipsum unde, porro enim velit!</p>
    <p>Voluptates, dignissimos sequi at tempora doloremque veritatis, id ut facilis sit assumenda molestiae! Omnis ullam, quod dolorum soluta facere aut exercitationem corrupti, commodi eveniet sit possimus expedita voluptatibus hic dicta, consequatur eum dolor quibusdam error ab necessitatibus! Perferendis, excepturi voluptas?</p>
    <p>Dolor labore quisquam nobis cumque tempore magni facilis. Illum voluptatibus iusto cum. Reprehenderit dolor aspernatur, minus tempore, et totam fuga illum, nemo facilis soluta laudantium magnam! Officiis sequi hic commodi iste libero. Accusamus nihil mollitia accusantium quaerat eligendi assumenda veniam?</p>
  </aside>

  <section class="one">
    <div class="container">
      <div class="grid">
        <div class="full-width-bg"></div>
        <main>
          <h1>This is main content</h1>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti expedita laudantium iure, quidem laborum saepe fugit doloremque magni neque! Praesentium omnis dicta provident repellat nobis expedita, perferendis iusto dolorem ipsa?</p>
          <p>Cum, minus. Libero praesentium magnam, ratione necessitatibus earum dolor ea delectus voluptas numquam, sed molestias. Animi fugiat officia, earum corrupti amet debitis, excepturi cum quam exercitationem et quisquam reiciendis temporibus!</p>
        </main>
      </div>
    </div>
  </section>

  <section class="two">
    <div class="container">
      <div class="grid">
        <main>
          <h1>Second Section Title</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa soluta nihil exercitationem quidem, nesciunt voluptas quaerat voluptate dolorum placeat nisi aspernatur quibusdam suscipit consequatur similique, in vel cumque. Aut, perspiciatis.</p>
          <p>Ipsam, tempore vel? Animi, labore. Soluta amet molestiae tempora veniam dolorem! Ipsum beatae, quisquam rerum nulla voluptas facere aliquam cumque, est pariatur aperiam eligendi incidunt adipisci quas maxime reprehenderit excepturi.</p>
          <p>Fugit tenetur iste corrupti veniam corporis rerum exercitationem consectetur beatae ipsa, nobis, nemo odit in minus facilis nam necessitatibus obcaecati blanditiis maiores quidem cum consequuntur dicta voluptatibus, earum totam. Consectetur.</p>
          <p>Accusantium dolor ratione aliquam facere, reiciendis cumque! Dolores voluptatibus earum sed officia nemo itaque laudantium dolorem perspiciatis doloremque, excepturi magnam accusantium nisi esse ipsum assumenda quo est impedit cum? Exercitationem?</p>
          <p>Excepturi accusamus quia id facilis molestiae, cum atque reiciendis at odio illo ad quibusdam necessitatibus quo rem quam? Nam, perspiciatis doloribus pariatur distinctio id illo reiciendis aperiam debitis minus inventore.</p>
        </main>
      </div>
    </div>
  </section>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

section {
  padding-block: 2rem;
}

.container {
  width: min(1400px, 90%);
  margin-inline: auto;
}

/* 全局网格容器，实现侧边栏跨两行 */
.main-grid {
  display: grid;
  grid-template-columns: min(200px, 100%) 1fr;
  gap: 1rem;
  position: relative;
}

.sidebar {
  grid-row: 1 / -1; /* 跨所有行 */
  border: 2px solid;
  background: #ff4444; /* 对应设计图的红色盒子 */
  padding: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr; /* 内部网格只需要一列 */
  gap: 1rem;
  align-items: start;
  
  & > * {
    border: 2px solid;
  }
}

/* 第一个section的全屏渐变+图片背景 */
.one {
  position: relative;
  z-index: 0;
  
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
      linear-gradient(45deg in oklch, lightblue, hotpink),
      url('你的图片地址') center/cover no-repeat;
    background-blend-mode: overlay;
    z-index: -1;
  }
}

/* 视口宽度的顶部背景元素 */
.full-width-bg {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(100vh - var(--scroll-top, 0px)); /* 动态计算高度 */
  background: rgba(0,0,0,0.1); /* 示例背景色，可替换 */
  z-index: -2;
}

.two {
  background: white;
}

.two main {
  grid-column: 1; /* 内部网格单列，无需偏移 */
}

/* 通过CSS变量获取滚动距离，计算顶部元素高度 */
@media (min-width: 768px) {
  body {
    --scroll-top: 0px;
  }
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    animation: updateScrollTop 0.1s infinite;
  }
  @keyframes updateScrollTop {
    to {
      --scroll-top: calc(100vh - 100%);
    }
  }
}

关键细节说明 #

1. 侧边栏自适应高度：通过main-grid的grid-row: 1 / -1让侧边栏直接跨越两个section的行，高度自动拉伸到最长内容的高度。
2. 全屏背景实现：.one的伪元素设置inset:0，覆盖整个section的视口范围，同时叠加渐变和背景图。
3. 视口宽度顶部元素：利用CSS变量结合动画获取滚动距离，动态计算元素高度，确保从视口顶部延伸到第一个section的网格第一行底部。
4. 保留原有容器限制：.container的宽度控制逻辑不变，确保内容在大屏幕上不会过度拉伸。

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