Какие свойства задать, чтобы контейнер занимал всю высоту?

Question

[Vann Damm]

Есть контейнер body и header , они обернуты в контейнер Application. Как сделать так чтобы контейнер body занимал всю высоту, независимо от количества элементов в нем.
Стили:

body {
min-width: 100%;
min-height: 100%;
line-height: $line-height;
font: $fontFamily;
font-size: $fontSize;
color: $N900;
background: $N0;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
}
.Application {
min-width: 100%;
min-height: 100%;
display: grid;
grid-template: 100px 1fr / 1fr;
}

.body {
min-width: 100%;
min-height: 100%;
display: grid;
grid-template-columns: 1fr 3fr;
}
.header {
width: 100%;
height: 100%;
align-items: center;
display: grid;
white-space: nowrap;
background-color: $bg_color_header;
grid-template-columns: min-content min-content;
justify-content: space-between;
}

Answer 1

[Denis Melnikov]

Почитать

Не верстальщик, но работает. А там, гуру подскажут

*{
    margin: 0;
    padding: 0;
}

html,body{
    height: 100%;
}
.app{
    height: 100%;
}
.header{
    height: 200px;
    background-color: aqua;
}
.body{

    height: calc(100% - 200px);
    background-color: bisque;
}

Comments

[Vann Damm]

Мне нужно именно на гридах + относительная величина в %