How can I make a sidebar 100% in height between header and footer using bootstrap 5-CodePudding

I'm trying to make my sidebar display full height between the header and footer when page content is smaller the the screen view. Is this even possible using bootstrap. I am unable to find any solution that works. Any help would be much appreciated.

  html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 75px;
}

.footer {
    position: absolute;
    height: 75px;
    bottom: 0;
    width: 100%;
    background-color: #303030;
    color: white;
} 

 <nav class="navbar navbar-expand-sm" style="background-color: #303030;">
    <div class="container-fluid">
      <a class="navbar-brand" href="#" title="Home">MyLogo</a>
    </div>
  </nav>
  <div class="container-fluid h-100">
    <div class="row h-100" style="border: 2px solid red;">
      <div class="col-3" style="border: 2px solid blue;">
        <p>vertical navigation</p>
      </div>
      <div class="col-9">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          Adipisci error vel recusandae minus ea atque non vitae dolorem commodi dolores 
          nostrum, est reiciendis maxime ab sit aliquid! Aliquam, modi natus.</p>
      </div>
    </div>
  </div>

CodePudding user response：

Try

html,
body {
  height: 100%;
}

Demo here: https://jsfiddle.net/cjrzL6qa/

CodePudding user response：

You need to add footer class in the html code, I don't see it there.
Remove from the css, in .footer the position absoulte
Everything is fine

CodePudding user response：

Bootstrap will have certain classes whose properties are strictly not to be changed.

I have introduced a new class called full-screen which will use 100 percent height of your viewport by using 100vh then I subtracted the height of your header and footer by using calc(100vh - 131px) where 131px is your header footer height.

I am pretty sure this will work on all screen sizes given that you have fixed header and footer sizes all time. In case the height of header or footer changes just recalculate manually and replace 131px to whatever number you calculate and adjust until you don't see a scroll.

Demo link: https://jsfiddle.net/awesomestvi/dbs7eofc/2/