Липкая позиция заголовка в CSS Сетка - PullRequest
Новая
       7

Липкая позиция заголовка в CSS Сетка

1 голос
/ 11 апреля 2020

Я учусь CSS Макет сетки, и у меня проблема с позиционированием.

Я хочу создать макет страницы, состоящий из меню слева, меню верхней панели и главного меню. содержимое страницы, как на изображении ниже:

enter image description here

Мне удалось достичь цели, но теперь я хочу исправить положение верхней панели и боковая панель при прокрутке основного содержимого.

Я установил position:sticky для обоих контейнеров, но он не работает.

Как я могу исправить?

Вот мой код: 

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

1 Ответ

0 голосов
/ 11 апреля 2020

Вам не нужно position: sticky. Это дополнительная сложность, и все же не полностью поддерживается некоторыми браузерами .

Просто используйте overflow: auto в основном контейнере. 

.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>
...