Bootstrap的伸展高度5.2.0行/列到页面底部

Question

我正在努力伸展左导航部分，以达到页面底部并保持响应速度。我正在使用Bootstrap 5.2.0。我尝试了许多解决方案，例如 h-100，flex Grow，min-vh-100m自我对准：strave 。似乎没有任何技巧。

codepen ：（您可能必须增加输出窗口的高度才能查看我的含义）：

https：/ /codepen.io/ma66ot/pen/kkqzxew

html

    <div class="col-md-3 col-lg-2">
      <div class="logo">
        <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 class="row">
          <div class="col-md-12">
            <div class="navigation ">
              <div class="title-nav">
                <img src="./assets/verwaltung.png" alt="" id="verwaltung-logo">
              </div>
                
                <div class="button-container">
                  <ul>
                    <li><a href="home"><button type="button" class="btn btn-primary btn-lg btn-block">Übersicht</button></a></li>
                    <li><a href="trainerInnen"><button type="button" class="btn btn-primary btn-lg btn-block">TrainerInnen</button></a></li>
                    <li><a href="teilnehmerInnen"><button type="button" class="btn btn-primary btn-lg btn-block">TeilnehmerInnen</button></a></li>
                    <li><a href="gruppen"><button type="button" class="btn btn-primary btn-lg btn-block">Gruppen</button></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-9 col-lg-10">
          <div class="mainfenster">
        </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;
}

Answer 1

AS flexbox色谱柱方向并屈曲。

1. 使左列视口高度并使用 min-vh-100
2. 还使左列 d-flex flex-column
3. 使用 flex-grow-1 在DIV上，您想最终填充剩余的列高度
4. 的高度

，在导航上使用 h-100 ，以便填充其'parent

<div class="container-fluid ">
    <div class="row">
        <div class="col-md-3 col-lg-2 min-vh-100 d-flex flex-column">
            <div class="logo">
                <div>
                    <img ...>
                </div>
            </div>
            <div class="row flex-grow-1">
                <div class="col-md-12">
                    <div class="navigation h-100">
                        <div class="title-nav">
                            <img .. >
                        </div>
                        <div class="button-container">
                            <ul>
                                <li><a href="home"><button type="button" class="btn btn-primary btn-lg btn-block">Übersicht</button></a></li>
                                <li><a href="trainerInnen"><button type="button" class="btn btn-primary btn-lg btn-block">TrainerInnen</button></a></li>
                                <li><a href="teilnehmerInnen"><button type="button" class="btn btn-primary btn-lg btn-block">TeilnehmerInnen</button></a></li>
                                <li><a href="gruppen"><button type="button" class="btn btn-primary btn-lg btn-block">Gruppen</button></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-lg-10">
            <div class="mainfenster">
            </div>
        </div>
    </div>
</div>

Answer 2

首先，您需要固定左徽标的高度之后，需要将高度添加到.NAVIGATION类和徽标的减去高度。 请参见下面的Exmple您的徽标DIV高度200px。

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

在上述情况下，