Мне нужно сверстать два блока - header и список, смысл простой, что бы я мог скроллить элементы внутри, а хедер оставался на своём месте, мне нужно что бы body имел overflow: hidden и я самостоятельно задавал места для скролла, вот текущая реализация:
<body>
<header>content</header>
<div class="wrapper">
<div class="scroll">
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
<article>item</article>
</div>
</div>
</body>
И CSS стили для этой вёрстки
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
background: #b6b6b6;
padding: 0 200px;
}
header {
width: 100%;
height: 80px;
background: #fa7979;
}
.wrapper {
width: 100%;
height: 100%;
padding: 20px 0;
}
.scroll {
width: 100%;
height: 100%;
overflow-y: auto;
display: grid;
gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
article {
width: 100%;
height: 300px;
background: #8fe779;
}
Проблема такова, что я хотел у wrapper указать паддинги сверху и снизу, что бы было красиво, но когда мой scroll переполняется данными, то игнорирует нижний пиддинг и уходит куда то в ад, ещё и не докручивается до конца, там всегда элемент меньше, чем все остальные.
Помогите пожалуйста, как сделать так, что бы скролл растягивался на всю доступную ему высоту (исключая и не уменьшая высоту header) и скроллился внутри себя
