Прокручиваемый список HTML с переменной ⇐ CSS

[Anonymous]

Я строю ux, где страница должна иметь заголовок и нижний колонтитул, приклеенные к верхней и нижней части экрана, и основной раздел в середине должен занимать все пространство. Столбцы, которые занимают остальное пространство равномерно. Class = "Snippet-Code">

Код: Выделить всё

html,
body {
width: 100wv;
height: 100hv;
margin: 0;
padding: 0;
}

.page-header {
background-color: greenyellow;
height: 5em;
align-content: center;
padding: 1em;
}

.page-footer {
background-color: lightblue;
height: 5em;
align-content: center;
padding: 1em;
}

.grid {
display: grid;
grid-template-columns: 15em 1fr 1fr;
grid-gap: 10px;
background-color: rgba(255, 0, 0, .7);
height: 100%;
margin: 0;
padding: 0;
}

.column {
font-family: "Helvetica Neue", sans-serif;
color: white;
text-transform: uppercase;
font-size: 12px;
background-color: rgba(0, 0, 0, .2);
display: flex;
padding: 12px;
gap: 8px;
margin: 0;
}

.cards-list {
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
overflow-y: auto;
}

.card {
width: 15em;
height: 10em;
background-color: lightblue;
padding: 4px;
border: 1px solid black;
}< /code>

PAGE HEADER THINGS GO HERE, HEIGHT NOT KNOWN TO THE COMPONENTS BELOW



Card 1
Card 2
Card 3
Card 4
Card 5





Footer stuff

https://playcode.io/2573733 333 33333333333333 годы/p>>

Подробнее здесь: https://stackoverflow.com/questions/797 ... h-variable