Grid布局中aside元素粘性定位未跟随main到底部的解决咨询

问题根源在于当前的网格结构：main和aside属于同一行网格，这一行的高度由main内容决定，position: sticky的生效范围被限制在这一行网格内，导致滚动到网格行底部后，aside无法继续保持粘性。

修改步骤： #

1. 重构HTML结构：用一个新容器（如#content-wrapper）包裹main和aside
2. 调整网格模板：让这个新容器占据原main和aside的网格区域
3. 设置容器布局：给新容器用flex布局，实现main和aside的并排，同时让aside的粘性定位基于整个页面滚动范围生效

修改后的代码： #

HTML部分：

<html>
  <head>
    <script src="https://kit.fontawesome.com/dee405e1bd.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="grid">
        <nav>
          <div>
            <div id="logo">
              <a href="#"><img src="https://berufsbildungscenter.ch/app/uploads/Logo_KAIO.png"></a>
            </div>
            <ul>
              <li><a href="#"><i class="fas fa-clipboard-list fa-fw fa-2x"></i></a></li>
              <li><a href="#"><i class="fas fa-masks-theater fa-fw fa-2x"></i></a></li>
            </ul>
          </div>
          <div>
            <ul>
              <li><a href="#"><i class="fas fa-sliders fa-fw fa-2x"></i></a></li>
            </ul>
          </div>
        </nav>
        <div id="search">
          <form>
            <input type="search" value="" placeholder="SEARCH">
          </form>
          <a href="#"><i class="fas fa-magnifying-glass"></i></a>
        </div>
        <!-- 新增的内容容器 -->
        <div id="content-wrapper">
          <main>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
            MAIN<br>
          </main>
          <aside>
            <div>
              ASIDE DIV
            </div>
            
            <div>
              ASIDE DIV
            </div>
          </aside>
        </div>
      <footer>
        <div>
          <span><i class="far fa-copyright"></i>&nbsp;&nbsp;2016&dash;2023 by learni.ch - Ein Produkt der           <a href="https://duolopment.ch" target="_blank">duolopment KLG</a></span>
          <nav>
            <ul>
              <li><a href="#">Impressum</a></li>
              <li><a href="#">Datenschutz</a></li>
              <li><a href="#">AGB</a></li>
            </ul>
          </nav>
        </div>
        <div>
          <nav>
            <ul>
              <li><i class="fas fa-code"></i>&nbsp;&nbsp;Version: Aphrodite (2.7)</li>
              <li><a href="#">Releasenotes</a></li>
              <li><a href="#">Support</a></li>
            </ul>
          </nav>
        </div>
      </footer>
    </div>
  </body>
</html>

CSS部分：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

:root {
  --border-radius: 8px;
  --box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
  
  --grid-row-height: 90px;
  --container-gap: 2rem;
  --container-padding: 2rem;
  
  --rem-xxs: 0.5rem;
  --rem-xs: 0.75rem;
  --rem-s: 1rem;
  --rem-m: 1.25rem;
  --rem-xm: 1.5rem;
  --rem-l: 2rem;
  --rem-xl: 2.5rem;
  --rem-xxl: 3rem;
  --rem-4s: calc(4 * var(--rem-s));
  --rem-5s: calc(5 * var(--rem-s));
  --rem-6s: calc(6 * var(--rem-s));
  
  --ff-primary: "Roboto", sans-serif;
  --ff-accent: "Roboto", sans-serif;

  --fs-small: clamp(var(--rem-xs), 0.5vw, var(--rem-s));
  --fs-normal: clamp(var(--rem-s), 1vw, var(--rem-m));
  --fs-big: clamp(var(--rem-m), 1.25vw, var(--rem-xm));
  --fs-xbig: clamp(var(--rem-xm), 1.5vw, var(--rem-l));
  --fs-xxbig: clamp(var(--rem-l), 1.5vw, var(--rem-xl));

  --fw-light: 100;
  --fw-normal: 300;
  --fw-bold: 400;
  --fw-xbold: 500;
  --fw-xxbold: 700;
  
  --clr-primary: #333333;
  --clr-accent: #EA161F;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background-color: #f5f5f5;
  color: var(--clr-primary);
}

body, p, input, select, textarea {
  font-family: var(--ff-primary);
  font-weight: var(--fw-normal);
  font-size: var(--fs-normal);
  line-height: 1.5;
}

#grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-rows: var(--grid-row-height) auto var(--grid-row-height);
  grid-template-areas: 
    "nav search"
    "content content"
    "footer footer";
  margin: var(--container-gap);
  gap: var(--container-gap);
  min-height: calc(100vh - 2 * var(--container-gap));
}

#grid > * {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--container-padding);
}

nav { grid-area: nav; }
#search { grid-area: search; }
#content-wrapper { grid-area: content; }
footer { grid-area: footer; }

/* 新增内容容器的样式 */
#content-wrapper {
  display: flex;
  gap: var(--container-gap);
  padding: 0;
  background-color: transparent !important;
  box-shadow: none !important;
}

#content-wrapper > main {
  flex: 7;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--container-padding);
}

#content-wrapper > aside {
  flex: 3;
  position: sticky;
  top: var(--container-gap);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

aside > * {
  border-radius: 8px;
  background-color: white;
  box-shadow: var(--box-shadow);
  padding: var(--container-padding);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav > * {
  display: flex;
  align-items: center;
  gap: var(--container-gap);
}

#logo img {
  height: calc(var(--grid-row-height) / 100 * 50);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--container-padding);
}

nav ul li a:link, nav ul li a:visited {
  font-weight: var(--fw-bold);
  height: var(--grid-row-height);
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--clr-primary);
}

nav ul li a:hover, nav ul li a:active {
  color: var(--clr-accent);
}

#search {
  padding: 0;
  padding-right: var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--container-padding);
}

#search form {
  width: 100%;
}

input[type=search] {
  border: none;
  width: 100%;
  height: var(--grid-row-height);
  padding: var(--container-padding);
  border-radius: var(--border-radius);
  outline: none;
}

#search a {
  color: var(--clr-accent);
  text-decoration: none;
  font-weight: var(--fw-xbold);
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--clr-accent) !important;
  color: white;
}

footer > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--container-gap);
}

footer a {
  color: white !important;
  text-decoration: none;
  font-weight: var(--fw-bold);
}

关键修改说明： #

• 把main和aside放入#content-wrapper，让这个容器占据网格的content区域
• #content-wrapper用flex布局，设置gap保持原间距
• 给aside添加align-self: flex-start，确保它从容器顶部开始定位，粘性效果正常生效
• 调整原#grid > *的样式，让#content-wrapper透明无阴影，内部的main和aside子元素保持原有样式

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