CSS 使用网格布局将内容设置为父 div 的 100%

Question

>我最近开始使用CSS中的网格布局，我正在尝试使其中一个网格区域中的元素填充整个区域。它可以将width设置为父级的100%。但是我真的很难让我的divheight与父div相同。以下是一些代码来展示我的问题：

body {
width: 100vw;
height: 100vh
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: [sidebar-col-start] 15% [sidebar-col-end content-col-start] auto [content-col-end];
grid-template-rows: [sidebar-row-start content-row-start] auto [sidebar-row-end footer-row-start] 10% [footer-row-end];
}
.area {
grid-column: content-col-start / content-col-end;
grid-row: content-row-start / footer-row-start;
background-color: rgba(255, 0, 0, 0.4);
align-items: stretch;
}
.footer {
grid-column: sidebar-col-start / content-col-end;
grid-row: footer-row-start / footer-row-end;
background-color: rgba(0, 255, 0, 0.4);
}
.sidebar {
grid-column: sidebar-col-start / sidebar-col-end;
grid-row: sidebar-row-start / sidebar-row-end;
background-color: rgba(0, 0, 0, 0.4);
}
.red {
background-color: red;
height: 100%;
}

<div class="grid">
<div class="sidebar">
</div>
<div class="area">
<div class="red">
</div>
</div>
</div>

链接到代码笔：https://codepen.io/Martin36/pen/ayyoxv

我的问题是：如何使div填充整个父项(即网格区域(？或者更具体地说，如何使孩子的height与父母的身高相匹配？

Answer 1

将 .red 设置为最小高度为 100vh。

body {
margin: 0;
width: 100vw;
height: 100vh
}
.grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: [sidebar-col-start] 15% [sidebar-col-end content-col-start] auto [content-col-end];
grid-template-rows: [sidebar-row-start content-row-start] auto [sidebar-row-end footer-row-start] 10% [footer-row-end];
}
.area {
grid-column: content-col-start / content-col-end;
grid-row: content-row-start / footer-row-start;
background-color: rgba(255, 0, 0, 0.4);
align-items: stretch;
}
.footer {
grid-column: sidebar-col-start / content-col-end;
grid-row: footer-row-start / footer-row-end;
background-color: rgba(0, 255, 0, 0.4);
}
.sidebar {
grid-column: sidebar-col-start / sidebar-col-end;
grid-row: sidebar-row-start / sidebar-row-end;
background-color: rgba(0, 0, 0, 0.4);
}
.red {
background-color: red;
height: 100vh;
}

<div class="grid">
<div class="sidebar">
</div>
<div class="area">
<div class="red">
</div>
</div>
</div>