I seem to be facing an issue with the sidebar where the bottom section is not visible. Interestingly, when I remove the top navbar, everything works fine. Despite my efforts to troubleshoot and apply various solutions, none of them seem to work for me.
Does anyone have any ideas on how to resolve this issue?
Here is a screenshot depicting the problem, showcasing the bottom of the scrollbar hidden beneath the page window: https://i.sstatic.net/5VCZ8.png
Below is the code snippet in question:
html,
body {
height: 100%;
overflow: hidden;
}
.scrollable {
overflow-y: auto;
height: 100vh;
}<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg bg-body-white shadow bg-white z-2">
<div class="container-fluid">
<a class="navbar-brand text-primary" href="#">
Shopping System
</a>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarText"
>
<span class="navbar-text text-dark me-4">Welcome, User Name</span>
</div>
</div>
</nav>
<!-- main content -->
<div class="container-fluid">
<div class="row">
<!-- left content -->
<div class="col-4">
<div class="row">
<!-- fixed sidebar -->
<div class="col-4 border-end">
<nav class="nav flex-column">
<a
class="nav-link active mb-3 text-dark border-bottom"
id="v-pills-home-tab"
data-bs-toggle="pill"
data-bs-target="#v-pills-home"
role="button"
aria-controls="v-pills-home"
aria-selected="true"
>Form 1</a
>
<a
class="nav-link mb-3 text-dark border-bottom"
id="v-pills-profile-tab"
data-bs-toggle="pill"
data-bs-target="#v-pills-profile"
role="button"
aria-controls="v-pills-profile"
aria-selected="false"
>Form 2</a
>
</nav>
</div>
<!-- scrollable sidebar -->
<div class="col border bg-info p-0">
<!-- <div class="scrollable"></div> -->
<div class="tab-content p-2 scrollable" id="v-pills-tabContent">
<div
class="tab-pane fade show active"
id="v-pills-home"
role="tabpanel"
aria-labelledby="v-pills-home-tab"
tabindex="0"
>
...
</div>
<div
class="tab-pane fade"
id="v-pills-profile"
role="tabpanel"
aria-labelledby="v-pills-profile-tab"
tabindex="0"
>
...
</div>
</div>
</div>
</div>
</div>
<!-- right content -->
<div class="col p-0">
<div class="card border-0">
<img
src="https://ibb.co/K905DBS"
style="width: 100%"
class="card-img rounded-0 border-0"
alt="map"
/>
</div>
</div>
</div>
</div>