Bootstrap - cant set main-container height to 100%

Question

I can figure out how to set height of my .main-container height to 100%.

It looks like this enter image description here I cant set my sidebar to 100%, when i do

.main-container {
    height: 94vh;
}

the height is too high.

There is some of my code, Im using bootstrap 5: Navbar:

<nav class="navbar fixed-top custom-navbar">

to position my sidebar nad main page im using:

<div class="main-container d-flex">
    <div id="side_nav">...</div>
    <div class="content">...</div>
</div>

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;
}

100% of what? The viewport or fill the remaining height below the navbar? What is the purpose of 94vh? Is the navbar 6vh? — Carol Skelly, May 24 '23 at 19:18
To fill the remaining height below the navbar, 94vh beacuse it is only working for me. I also want make my sidebar static, beacuse now when im scrolling items inside of navbar going down as well. — GrootStack, May 24 '23 at 19:20
I want scrolling only main page on the right. On the sidebar i want have it to be static like navbar and sidebar will have own scroll bar if there is to much items — GrootStack, May 24 '23 at 19:25
Great, can you please clarify the question to explain this? Also what about the content scrolling if it's taller than the sidebar? — Carol Skelly, May 24 '23 at 19:33

Carol Skelly · Answer 1 · 2023-05-24T19:40:39.467

This is similar to: Bootstrap Navbar and content fill height flexbox and this question since Bootstrap 5 flexbox works the same way.

"100%" and "fill remaining height" are 2 different things. I think what you're asking for is 100% height layout with Navbar where the main-container doesn't exceed the viewport height, and fills the remaining space.

body {
    background: #f5f7fa;
    padding-top: 3.5rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.content {
    width: 100%;
    display: flex;
    justify-content: center;
}

#side_nav {
    background: #ffffff;
    min-width: 300px;
    max-width: 300px;
    position: relative;
    border-right: 1px solid #cbd0dd;
}

<nav class="navbar fixed-top custom-navbar"> Nav </nav>
<div class="main-container d-flex bg-light flex-grow-1 overflow-auto">
    <div id="side_nav" class="overflow-auto">
        <h1>sidebar</h1>
    </div>
    <div class="content overflow-auto">
        <h1>content</h1>
        ...
    </div>
</div>

https://codeply.com/p/8P05IqFLFY

Bootstrap - cant set main-container height to 100%

1 Answers1