I'm struggling to set the height of my .main-container to 100%.
When I try to do that, the height ends up being too high. Here is a screenshot for reference: enter image description here
.main-container {
height: 94vh;
}
Here is some of my code where I'm using Bootstrap 5:
<nav class="navbar fixed-top custom-navbar">
To position my sidebar and main page, I am using the following code:
<div class="main-container d-flex">
<div id="side_nav">...</div>
<div class="content">...</div>
</div>
And here is some of my CSS:
body {
background: #f5f7fa;
padding-top: 3.5rem;
}
.content {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#side_nav {
background: #ffffff;
min-width: 300px;
max-width: 300px;
position: relative;
border-right: 1px solid #cbd0dd;
}