Stretch height of boostrap 5.2.0 row/column to bottom of page-CodePudding

I'm struggling to stretch the left navigation section to reach the bottom of the page and stay responsive. I'm using Bootstrap 5.2.0. I tried many solutions like h-100, flex-grow, min-vh-100m self-align: stretch. Nothing seems to do the trick.

Codepen: (You may have to increase the height of the output window to see what I mean) :

https://codepen.io/ma66ot/pen/KKQZXew

HTML

    <div >
      <div >
        <div>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/300px-Circle_-_black_simple.svg.png" id="circle" alt="">
        </div>
      </div>
        <div >
          <div >
            <div >
              <div >
                <img src="./assets/verwaltung.png" alt="" id="verwaltung-logo">
              </div>
                
                <div >
                  <ul>
                    <li><a href="home"><button type="button" >Übersicht</button></a></li>
                    <li><a href="trainerInnen"><button type="button" >TrainerInnen</button></a></li>
                    <li><a href="teilnehmerInnen"><button type="button" >TeilnehmerInnen</button></a></li>
                    <li><a href="gruppen"><button type="button" >Gruppen</button></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div >
          <div >
        </div>
      </div>    
    </div>
  </div>
</div>

CSS

h2 {
  width:100%;
}

html button {
  border: 0;
  width: 100%;
}


html ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

html .container-fluid {
      padding: 1em;
    }

#circle{
  width: 100%;
  height: 100%;
}

#verwaltung-logo {
  width: 50%;
  height: 50%;
}
html .links {
  padding-right: 3em;
}

/* Navigation */
html .navigation {
  background: #FFA500;
  border-radius: 48px;
  padding: 1em;
  margin-top: 1em;
}

li {
   margin-top: 1em;
   margin-bottom: 1em;
}

.button-container{
  width: 80%;
  margin: auto;
}
.navigation a {
  color: white;
  text-decoration: none;
}

.mainfenster {
  background: #FF6E13;
  border-radius: 48px;
  overflow-y: scroll;
  height: calc(100vh - 2em);;
}

/* Hide scrollbar for Chrome */
.mainfenster::-webkit-scrollbar {
  display: none;
}

.mainfenster {

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

.mainfenster button {
  border-radius: 10px !important;
}

CodePudding user response：

First you need to fix height of left logo after that you need to add height to .navigation class and minus height of logo. see the below exmple

html .navigation { 
    height: calc(100vh - 200px);
}

In this above case your logo div height 200px.

CodePudding user response：

As explained here anytime you want to fill or stretch the remaining height flexbox column direction and flex grow.

make the left column viewport height and use min-vh-100
also make the left column d-flex flex-column
use flex-grow-1 on the div you want to fill the remaining column height
finally, use h-100 on the navigation so it fills the height of its' parent

https://codeply.com/p/CqV3FF1x5L

<div >
    <div >
        <div >
            <div >
                <div>
                    <img ...>
                </div>
            </div>
            <div >
                <div >
                    <div >
                        <div >
                            <img .. >
                        </div>
                        <div >
                            <ul>
                                <li><a href="home"><button type="button" >Übersicht</button></a></li>
                                <li><a href="trainerInnen"><button type="button" >TrainerInnen</button></a></li>
                                <li><a href="teilnehmerInnen"><button type="button" >TeilnehmerInnen</button></a></li>
                                <li><a href="gruppen"><button type="button" >Gruppen</button></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div >
            <div >
            </div>
        </div>
    </div>
</div>