如何使用 bootstrap 5 使页眉和页脚之间的侧边栏高度为 100%

Question

当页面内容小于屏幕视图时，我试图让我的侧边栏显示页眉和页脚之间的完整高度。这甚至可以使用 bootstrap。我找不到任何有效的解决方案。任何帮助将不胜感激。

  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>
  <div class="footer">Footer</div>

Answer 1

尝试

html,
body {
  height: 100%;
}

此处演示：https://jsfiddle.net/cjrzL6qa/

Answer 2

我知道为什么！！！从第 6 行 html 中删除“h-100”，它将起作用...

Answer 3

Bootstrap 将有某些 class 属性严格不能更改。

我引入了一个名为 full-screen 的新 class，它将通过使用 100vh 使用视口的 100% 高度，然后减去 header 的高度，然后footer 使用 calc(100vh - 131px)，其中 131px 是您的 header + footer 身高。

鉴于您始终具有固定的页眉和页脚大小，我很确定这适用于所有屏幕尺寸。如果页眉或页脚的高度发生变化，只需手动重新计算并将 131px 替换为您计算和调整的任何数字，直到您看不到滚动。

演示 link：https://jsfiddle.net/awesomestvi/7gxqa265/10/

如何使用 bootstrap 5 使页眉和页脚之间的侧边栏高度为 100%

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

html

css

twitter-bootstrap