如何使用引导程序 5 在页眉和页脚之间制作 100% 高度的侧边栏

Question

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

  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

Bootstrap 将具有某些类，其属性严格不得更改。

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

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

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

Answer 2

试试

html,
body {
  height: 100%;
}

在这里演示：https://jsfiddle.net/cjrzL6qa/

Answer 3

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