Я пытаюсь создать макет, используя сетку 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
