Hi there, I'm seeking assistance with setting up layouts. As a newcomer to front-end development, I have been tasked with creating a layout similar to the one shown in the linked image:
The navigation elements (NAV) in the image correspond to NAVBARs Bootstrap components.
I am facing an issue where I am trying to stretch the navbars and content div to the full height of the page. Whenever I apply the min-height: 100vh attribute to nav3, it results in unwanted scrolling bars. My suspicion is that this attribute takes the height of the entire window and I may need to subtract the height of nav2. Hoping for a straightforward solution to this problem.
#dashboardContainer {
display: flex;
align-items: stretch;
}
#dashboardNav {
height: 84px;
width: 100%;
}
#rightBar {
width: 376px;
}
#content {
width: 100%;
min-height: 100vh;
transition: all 0.3s;
}
#sidebar {
min-width: 175px;
max-width: 175px;
}<body class="dashboardBody">
<div id="dashboardContainer">
<nav id="sidebar">
<!-- Left expandable sidebar -->
</nav>
<div class="d-flex flex-column" id="content">
<nav class="navbar navbar-expand-lg navbar-light p-0 justify-content-end" id="dashboardNav">
<!-- Top navbar -->
</nav>
<div>
<div>
<!-- Content -->
</div>
<nav id="rightBar">
<!-- Right sidebar -->
</nav>
</div>
</div>
</div>