网格项目 100% 父级高度

Question

此页面中的红色侧边栏需要为容器高度的 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%...

Answer 1

用于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>