Scrollable Content With Sticky Sidebar Using CSS

#css #html #tutorial #design

In this post, we are going to quickly see how can we create a page with Scrollable Content and Sticky/Fixed Sidebar.

We will create three div, one parent div i.e. Container and rest two are for Content and Sidebar.

<div class='container'>
   <div class='content'>
   </div>
   <div class='sidebar'></div>
</div>

We will use display as Grid to achieve our task, the CSS goes below

.container {
display: grid;
gap: 0 1rem;
grid:
"header side" auto
"inside side" auto
"content side" auto
"footer side" auto / auto 16rem;
margin: 0 auto;
max-width: 50rem;
padding: 1rem;
position: relative;
}
.content {
grid-area: content;
}
.sidebar {
grid-area: side;
margin-top: 1.5rem;
position: fixed;
right: calc(50% - 28.5rem);
top: 0;
width: 15rem;
}

That's it, just add your required HTML into content and side div respectively.