css - 网格元素 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% 高度绝对位置的内部元素的情况下实现？

请注意，我为其添加了 100 像素的高度，只是为了指出它需要可滚动。但我希望高度为容器的 100%...

Answer 1

使用 min-height: 100%;height:0; 避免 aside 的高度影响布局然后强制它同时为 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>