Bootstrap 高度100%

在Bootstrap中，可以使用一些类来实现高度100%的效果。具体方法如下：

1. 如果需要让某个元素的高度占据整个屏幕的高度，可以使用`vh-100`类。例如：

<div class="vh-100">
  这个元素将占据整个屏幕的高度。
</div>

2. 如果需要让某个元素的高度占据父元素的全部高度，可以使用`h-100`类。例如：

<div style="height: 500px;">
  <div class="h-100">
    这个元素将占据父元素的全部高度。
  </div>
</div>

3. 如果需要让某个元素的高度占据浏览器窗口的高度（不包括导航栏），可以使用`vh-100`和`d-flex`类。例如：

<div class="vh-100 d-flex flex-column">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 导航栏内容 -->
  </nav>
  <div class="flex-grow-1">
    这个元素将占据剩余的窗口高度。
  </div>
</div>

在上面的代码中，`vh-100`类表示占据整个窗口高度，`d-flex flex-column`类表示开启Flexbox布局并垂直排列子元素，`flex-grow-1`类表示让子元素自动填充剩余高度。需要注意的是，为了避免内容被导航栏遮挡，可以将导航栏放在父元素的第一项，并使用`flex-grow-1`类让子元素自动填充剩余高度。