Как добиться липкой позиции с помощью макета сетки - PullRequest
Новая
       59

Как добиться липкой позиции с помощью макета сетки

0 голосов
/ 04 августа 2020

Я застрял с макетом сетки, где я хочу иметь sticky header и sticky боковую панель после этого footer как здесь, на SO, но когда нижний колонтитул вот-вот появится, все рассердятся, вот что я пробовал пока 

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

Ответы [ 2 ]

2 голосов
/ 04 августа 2020

Измените высоту aside на height: calc(100vh - 80px);

Полный код: 

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

Подробнее о функции CSS calc(): https://developer.mozilla.org/en-US/docs/Web/CSS/calc

1 голос
/ 04 августа 2020

сделайте содержимое в стороне липким и увеличьте z-index заголовка: 

* {
  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...