如何使用网格布局实现粘性位置

Question

我被网格布局困住了，我想要 sticky header 和 sticky 侧边栏 footer 就像这里的 SO 但是当页脚是关于到目前为止，一切都变得疯狂是我尝试过的

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}

.container {
  display: grid;
  grid-template-areas: "header header" "aside main" "footer footer";
  grid-template-columns: 20% 80%;
}

header {
  grid-area: header;
  background: red;
  min-height: 80px;
  position: sticky;
  top: 0;
}

aside {
  grid-area: aside;
  background: green;
  position: sticky;
  top: 80px;
  height: 100vh;
  font-size: 20px;
}

main {
  grid-area: main;
  background: blue;
  height: 150vh;
  font-size: 20px;
}

footer {
  grid-area: footer;
  background: darkcyan;
  height: 80px;
}

<div class="container">
  <header>
    <h1>Hello</h1>
  </header>
  <aside>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </p>
  </aside>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </p>
  </main>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

Answer 1

将 aside 的高度更改为 height: calc(100vh - 80px);

完整代码：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}

.container {
  display: grid;
  grid-template-areas: "header header""aside main""footer footer";
  grid-template-columns: 20% 80%;
}

header {
  grid-area: header;
  background: red;
  min-height: 80px;
  position: sticky;
  top: 0;
}

aside {
  grid-area: aside;
  background: green;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  font-size: 20px;
}

main {
  grid-area: main;
  background: blue;
  height: 150vh;
  font-size: 20px;
}

footer {
  grid-area: footer;
  background: darkcyan;
  height: 80px;
}

<html>
   <body>
      <div class="container">
         <header>
            <h1>Hello</h1>
         </header>
         <aside>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            </p>
         </aside>
         <main>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
            </p>
         </main>
         <footer>
            <h1>Footer</h1>
         </footer>
      </div>
   </body>
</html>

有关 CSS calc() 函数的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 2

把aside里面的内容粘起来，增加header的z-index:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}

.container {
  display: grid;
  grid-template-areas: "header header" "aside main" "footer footer";
  grid-template-columns: 20% 80%;
}

header {
  grid-area: header;
  background: red;
  min-height: 80px;
  position: sticky;
  z-index:1;
  top: 0;
}

aside {
  grid-area: aside;
  background: green;
  font-size: 20px;
}
aside > p {
  position: sticky;
  top: 80px;
}

main {
  grid-area: main;
  background: blue;
  height: 150vh;
  font-size: 20px;
}

footer {
  grid-area: footer;
  background: darkcyan;
  height: 80px;
}

<div class="container">
  <header>
    <h1>Hello</h1>
  </header>
  <aside>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </p>
  </aside>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </p>
  </main>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

如何使用网格布局实现粘性位置

How can I achieve a sticky position with grid layout

html

css

sticky

css-grid