I am attempting to create a layout similar to Stack Overflow in Bootstrap 5. I am using only the Bootstrap grid and not other utility classes (using Sass),
@import "../node_modules/bootstrap/scss/grid"This layout includes a fixed header, fixed left sidebar, and scrollable main content (which contains post content and a footer)
Note: In the example code, I have used a few helper classes which will be taken care of later. This is just for demonstration purposes...
Problem: An unwanted x-axis scrollbar appears (see example code below). This issue needs to be resolved...
Before asking, I have already tried multiple solutions but have not been able to resolve it. If the answer is already available here, please provide the link and I will delete my question
header {
position: fixed;
top: 0;
height: 50px;
background-color: rebeccapurple;
}
#sticky-sidebar {
position: fixed;
height: calc(100vh - 50px);
top: 50px;
max-width: 20%;
background-color: red;
}
main{
min-height: 100vh;
}
footer{
min-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid g-0">
<div class="row">
<header>
<div class="col-md-12">
Header
</div>
</header>
</div>
</div>
<div class="container-fluid g-0">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Menu
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</p>
</main>
<footer style="text-align: center;">
© Footer 2021
</footer>
</div>
</div>
</div>