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

Question

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

Not sure why you would want to set 100vh if the content obviously wont fit it? I would say you have to set appropiated height or use something like paging to avoid scrolling. I would go for removing `height:100vh` from main and add `position: sticky; bottom: 0;` to footer — Hatzen, Feb 11 '22 at 09:48

Khushbu Vaghela · Accepted Answer · 2022-02-11T11:14:51.093

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

Thanks but based on my understanding display grid is not very good for app type layout with lots of fixed elements in the screen where you want to control both height and width responsiveness — zEn feeLo, Feb 13 '22 at 22:52

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

1 Answers1