Revise the final part of mainLayout.razor.css to:
@media (min-width: 641px) {
.page {
flex-direction: row;
}
.sidebar {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row {
position: sticky;
top: 0;
z-index: 1;
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
article {
height:100vh;
}
}
MainLayout.razor:
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content ps-0 pt-0">
@Body
</article>
</main>
</div>
In your target component:
<div class="container-fluid bg-primary" style="height:100vh">
Hello World!
</div>
Result:
https://i.sstatic.net/4bouU.png