Как использовать сетку CSS с липким заголовком/боковой панелью и непересекающим нижним колонтитулом? ⇐ Html

[Anonymous]

Я пытаюсь создать макет, используя сетку CSS с: < /p>

List Liece < /p>
< /li>
липкий заголовок, < /p>
< /li>
thecke Header, < /p>
< /li>
< /p>
< /li>
< /p>
< /li>
< /p>
< /li>
< /p>
< /li>
. /> Основная область содержания, < /p>
< /li>
и нижний колонтитул внизу. /> Вот что я попробовал:


* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-align: center;
}

.container {
display: grid;
grid-template-areas: "header header" "aside main" "footer footer";
grid-template-columns: 20% 80%;
}

header {
grid-area: header;
background: red;
min-height: 80px;
position: sticky;
top: 0;
}

aside {
grid-area: aside;
background: green;
position: sticky;
top: 80px;
height: 100vh;
font-size: 20px;
}

main {
grid-area: main;
background: blue;
height: 150vh;
font-size: 20px;
}

footer {
grid-area: footer;
background: darkcyan;
height: 80px;
}< /code>


Hello



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam



Footer

< /code>
< /div>
< /div>
< /p>
с помощью этого кода правильно заглушка и боковая панель, но когда я прокручиваю к нижний колонтитул, боковая панель перекрывается и макет «разрывы». Появиться правильно внизу без перекрытия?

Подробнее здесь: https://stackoverflow.com/questions/632 ... ing-footer