Элемент сетки 100% высота родителя - PullRequest
Новая
       38

Элемент сетки 100% высота родителя

2 голосов
/ 21 октября 2019

Красная боковая панель на этой странице должна быть на 100% высоты контейнера: 

body {
  display: grid;
  min-height: 85vh;
  grid-template-columns: auto 10fr 4fr;
  grid-template-rows: minmax(1rem, max-content) 1fr minmax(1rem, max-content);
  grid-template-areas: "header header aside" "main main aside" "footer footer footer";
}

header {
  grid-area: header;
  background: pink;
}

footer {
  grid-area: footer;
  background: blue;
}

main {
  grid-area: main;
  background: green;
}

aside {
  grid-area: aside;
  background: red;
  height: 100px;
  overflow-y: scroll;
}
<header> header </header>
<main>main</main>
<aside>
  aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>
</aside>
<footer> footer </footer>

Может ли это быть достигнуто без добавления другого внутреннего элемента с абсолютной позицией высоты 100%?

обратите внимание, что я добавил к нему высоту 100px только дляуказать, что это должно быть прокручиваемым. Но я хочу, чтобы высота была 100% от контейнера ...

Ответы [ 2 ]

3 голосов
/ 21 октября 2019

Используйте min-height: 100%;height:0;, чтобы избежать влияния отступа на макет, а затем принудительно сделайте его равным 100% высоты (высота его дорожки определяется другим содержимым) 

body {
  display: grid;
  min-height: 85vh;
  grid-template-columns: auto 10fr 4fr;
  grid-template-rows: 
    minmax(1rem, max-content) 1fr minmax(1rem, max-content);
  grid-template-areas: 
    "header header aside" 
    "main   main   aside" 
    "footer footer footer";
}

header {
  grid-area: header;
  background: pink;
}

footer {
  grid-area: footer;
  background: blue;
}

main {
  grid-area: main;
  background: green;
}

aside {
  grid-area: aside;
  background: red;
  min-height: 100%;
  height:0;
  overflow-y: scroll;
}
<header> header </header>
<main>main</main>
<aside>
  aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>
</aside>
<footer> footer </footer>
1 голос
/ 21 октября 2019

Вы можете добавить точную высоту, которая используется в контейнере сетки, а затем добавить overflow-y: scroll

body {
  display: grid;
  min-height: 75vh;
  grid-template-columns: auto 10fr 4fr;
  grid-template-rows: minmax(1rem, max-content) 1fr minmax(1rem, max-content);
  grid-template-areas: "header header aside" "main main aside" "footer footer footer";
}

header {
  grid-area: header;
  background: pink;
}

footer {
  grid-area: footer;
  background: blue;
}

main {
  grid-area: main;
  background: green;
}

aside {
  height: 100%;
  grid-area: aside;
  background: red;
  max-height: 75vh;
  overflow-y: scroll;
  z-index: 1;
}
<header> header </header>
<main>main</main>
<aside>
  aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>
</aside>
<footer> footer </footer>
...