Header Sticky Position in CSS Grid Layout

Question

I'm learning CSS Grid layout and i have a problem about positioning.

What i want is to create a page layout composed by a left-side menu, top-bar menu and a main content page like the image below:

I have been able to achieve the goal, but now i want to fix the position of the top bar and sidebar while main content is scrolling.

I set position:sticky to both containers but it does not working.

How can i fix?

Here is my code:

* {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 10% 100vh;
  grid-template-areas: 
      "LeftMenu TopMenu" 
       "LeftMenu Main";
}

.LeftMenu {
  background-color: #a4a4a4;
  grid-area: LeftMenu;
  width: 200px;
  height: 100%;
}

.TopMenu {
  background-color: #d49494;
  grid-area: TopMenu;
  width: 100%;
  height: 100%;
  display: flex;
}

.Main {
  background-color: #8990eb;
  grid-area: Main;
  width: 100%;
  height: 100vh;
}

<div class="xdg-component-appnav-menu">
  <div class="grid-container">
    <div class="LeftMenu">left menu</div>
    <div class="TopMenu">top menu</div>
    <div class="Main">
      <p style="padding-bottom: 1000px;">Content</p>
    </div>
  </div>
</div>

Michael Benjamin · Accepted Answer · 2020-04-11 18:01:48Z

1

You don't need position: sticky. It's extra complication and still isn't fully supported by some browsers.

Just use overflow: auto on the main container.

.grid-container {
  display: grid;
  height: 100vh;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 10% 90%;
  grid-template-areas: 
     "LeftMenu TopMenu"
     " LeftMenu Main  ";
}

.LeftMenu {
  grid-area: LeftMenu;
  background-color: #a4a4a4;
}

.TopMenu {
  grid-area: TopMenu;
  background-color: #d49494;
}

.Main {
  grid-area: Main;
  overflow: auto; /* key adjustment */
  background-color: #8990eb;
}

body {
  margin: 0;
}

<div class="xdg-component-appnav-menu">
  <div class="grid-container">
    <div class="LeftMenu">left menu</div>
    <div class="TopMenu">top menu</div>
    <div class="Main">
      <p style="height: 1000px;">Content</p>
    </div>
  </div>
</div>

edited Apr 11, 2020 at 18:01

answered Apr 11, 2020 at 17:54

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Header Sticky Position in CSS Grid Layout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related