'How to make some CSS Grid elements stick to the viewport?

I'm try to have 100vh viewport with multiple responsive overlay on top of that Here is the code, I can make header element get fixed on the viewport with position sticky but for the rest that doesn't work

Also, I'm trying to use CSS Grid for this Here is the code

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>

Codepen https://codepen.io/ikamy/pen/rNYwOwM

Please vertically minimize and then scroll I'm trying to fix footer and aside without using position fixed or absolute

While the body is display Grid I'm trying to use with: 100vh on the body and make the other Grid elements sticks , and I only scroll on the main element

Solution 1:^[1]

You need to use min-height:100vh instead of height:100vh

And then use position:sticky on element you want to be sticky with top or bottom.

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>

For reference you may look at this question: 'position: sticky' not working when 'height' is defined

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How to make some CSS Grid elements stick to the viewport?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]