Grid item 100% height of parent

Question

The red sidebar in this page needs to be 100% of the container height:

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>

Can this be achieved without adding another inner element with 100% height absolute position ?

note that I added 100px height to it just to point out that it needs to be scrollable. But I want the height to be 100% of container...

to be more clear, it need to be 100% container minus the footer? — Temani Afif, Oct 21 '19 at 14:32

score 8 · Accepted Answer · answered Oct 21 '19 at 14:33

8

Use min-height: 100%;height:0; to avoid the height of the aside affecting the layout then force it to be 100% height at the same time (height of its track defined by the other content)

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>

answered Oct 21 '19 at 14:33

Temani Afif

245,468
26
309
415

1

@Michael_B yeah not easy to explain but basically I make the element 0 height so the layout get rendred with this constraint and we obtain the track where we will have a height defined by the adjacent element. Then the min-height will use that height as a reference to expand the element. We may think that height:100% will do the job but it won't because at the time of rendring the grid it will be auto so it will define the height of track. In our case the min-height will compute to auto then we resolve it after – Temani Afif Oct 21 '19 at 14:55
@Michael_B same trick works with width too: https://stackoverflow.com/a/55041133/8620333 (probably more intuitive) – Temani Afif Oct 21 '19 at 15:01
Should I use this tricky one, or should I go with the inner absolute div? – Alex Oct 21 '19 at 16:32
@Alex use this one. It's more logical than an absolute element since it keeps everything in-flow. I also don't think you will have any browser support issue since it rely on common properties. – Temani Afif Oct 21 '19 at 18:32
dude is a genious – sshmaxime Dec 22 '22 at 02:35

score 1 · Answer 2 · edited Oct 21 '19 at 15:57

You can add the exact height that uses on the grid container and then add 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>

the container is using min-height, so its height will increase if you fix the height of the aside, it won't remain the same — Temani Afif, Oct 21 '19 at 14:37

Grid item 100% height of parent

2 Answers2

Linked