CODEWITHSUNDEEP
htmlcsscss-gridsticky
Umutambyi Gad
Umutambyi Gad

Reputation: 4101

How can I achieve a sticky position with grid layout

I'm stuck with the grid layout where I want to have sticky header and sticky sidebar thereafter footer like here on SO but when footer is about to come up everything get mad here is what I tried so far

* {
  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>

Upvotes: 0

Views: 2684

Answers (2)

Αntonis Papadakis
Αntonis Papadakis

Reputation: 1242

Change the height of the aside to height: calc(100vh - 80px);

Full code:

* {
  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>

More info about CSS calc() function: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 274069

make the content inside the aside sticky and increase the z-index of header:

* {
  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>

Upvotes: 2

Related Questions