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.
Happy Coding, Thanks!
Top comments (0)