如何让一些 CSS Grid 元素粘在视口上？

Question

我正在尝试使用 100vh 视口，并在其上添加多个响应式叠加层 这是代码，我可以使标题元素固定在视口上，位置粘滞，但其余部分不起作用

另外，我正在尝试为此使用 CSS Grid 这是代码

body {
  display: grid;
  grid-template-columns: 1fr minmax(20em, 30vw);
  grid-template-rows: clamp(3em, 10vh, 5em) 1fr clamp(7em, 20vh, 9em);
}

header {
  background-color: #eee;
  grid-column: 1 / end;
  grid-row: 1 / 2;
}

main {
  height: 100vh;
  grid-column: 1 / end;
  grid-row: 1 / end;
}

aside {
  background-color: #ccc;
  grid-column: 2 / end;
  grid-row: 2 / end;
}

footer {
  background-color: #444;
  grid-row: 3 / end;
  grid-column: 1 / end;
}

<body>
  <header></header>
  <main>
    <section class="questions" id="objectives">
      <h2>Objectives</h2>
      <div class="question">
        <h3>1. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
      <div class="question">
        <h3>2. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
      <div class="question">
        <h3>3. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
      <div class="question">
        <h3>4. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
      <div class="question">
        <h3>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
      <div class="question">
        <h3>6. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
      <div class="question">
        <h3>7. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
      <div class="question">
        <h3>8. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
      <div class="question">
        <h3>9. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
        <button>Yes</button><button>No</button>
      </div>
    </section>
  </main>
  <aside></aside>
  <footer></footer>
</body>

代码笔https://codepen.io/ikamy/pen/rNYwOwM

请垂直最小化然后滚动 我正在尝试在不使用位置固定或绝对位置的情况下修复页脚和旁边

虽然主体是显示网格，但我正在尝试使用：主体上的 100vh 并使其他 Grid 元素粘住，我只在主要元素上滚动

Answer 1

您需要使用min-height:100vh 而不是height:100vh

然后在你想粘在顶部或底部的元素上使用position:sticky。

body {
        display: grid;
        grid-template-columns: 1fr minmax(20em, 30vw);
        grid-template-rows: clamp(3em, 10vh, 5em) 1fr clamp(7em, 20vh, 9em);
    }
    
    header {
        background-color: #eee;
        grid-column: 1 / end;
        grid-row: 1 / 2;
    }
    
    main {
      min-height:100vh;
        grid-column: 1 / end;
        grid-row: 1 / end;
    }
    
    
    aside {
        background-color: #ccc;
        grid-column: 2 / end;
        grid-row: 2 / end;
        position: sticky;
        top: 0;
        z-index:99999;
    }
    
    footer {
        background-color: #444;
        grid-row: 3 / end;
        grid-column: 1 / end;
       position: sticky;
        bottom: 0
          ;
    }

<body>
    <header></header>
    <main>
        <section class="questions" id="objectives">
            <h2>Objectives</h2>
            <div class="question">
                <h3>1. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>2. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>3. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>4. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>5. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>6. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>7. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>8. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
            <div class="question">
                <h3>9. Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
                <button>Yes</button><button>No</button>
            </div>
        </section>
    </main>
    <aside></aside>
    <footer></footer>
</body>

作为参考，你可以看看这个问题：'position: sticky' not working when 'height' is defined