CSS Sticky - Как залипнуть, чтобы заполнить доступную высоту? - PullRequest
Новая
       46

CSS Sticky - Как залипнуть, чтобы заполнить доступную высоту?

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

Я хочу создать макет сетки, и я хочу, чтобы он был привязан к top: 0 и заполнял всю оставшуюся высоту, например, 100% высоты, и когда я прокручиваю вниз, мне нужно изменить высоту на 100%, вычесть высоту нижних колонтитулов. Это можно сделать без JS? 

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

.grid {
  display: grid;
  grid-template-areas: "aside content"
    "footer footer";
  grid-template-columns: 20rem 1fr;
}

aside {
  grid-area: aside;
  background-color: red;

}
nav {
  font-size: 2rem;
  color: black;
  position: sticky;
  top: 0;
  
  height: 100%;
  background-color: yellow;
}
main {
  grid-area: content;
  background-color: green;
  height: 150vh;
}
footer {
  grid-area: footer;
  background-color: blue;
  height: 10rem;
}

ul {
  list-style: none;
}
<div class="grid">
  <aside>
  <nav>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </nav></aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>

1 Ответ

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

Замените height:100% на min-height:100vh

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

.grid {
  display: grid;
  grid-template-areas: "aside content"
    "footer footer";
  grid-template-columns: 20rem 1fr;
}

aside {
  grid-area: aside;
  background-color: red;

}
nav {
  font-size: 2rem;
  color: black;
  position: sticky;
  top: 0;
  
  min-height:100vh;
  background-color: yellow;
}
main {
  grid-area: content;
  background-color: green;
  height: 150vh;
}
footer {
  grid-area: footer;
  background-color: blue;
  height: 10rem;
}

ul {
  list-style: none;
}
<div class="grid">
  <aside>
  <nav>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </nav></aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>
...