Bootstrap 4容器100%高度有溢出

Question

我使用的是bootstrap 4。这个问题已经问过并回答过了，但是，这些问题从来没有考虑到导航栏。

每当我使用h-100创建一个容器height 100%，并且在它上面有一个导航栏时，我在容器中得到一个溢出，即导航栏的高度。

我想要在容器内垂直和水平居中一个组件，然而，由于容器溢出，垂直居中超出了导航栏的高度。

我对h-100有什么不明白的地方？

路径：HTML

<div class="full-height">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Logo</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Home</a></li>
         </ul>
      </div>
   </nav>
   <div class="container h-100">
      <div class="row h-100 justify-content-center align-items-center">
         <form class="col-12">
            <div class="form-group"><label for="formGroupExampleInput">Example label</label><input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"></div>
            <div class="form-group"><label for="formGroupExampleInput2">Another label</label><input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"></div>
         </form>
      </div>
   </div>
</div>

路径：CSS

body, html, .full-height {
  height: 100%;
}

Answer 1

如果减去导航栏的高度，将得到100%的视图高度：

.full-height {
  height: 100%;
  height: -moz-calc(100vh - 56px);
  height: -webkit-calc(100vh - 56px);
  height: -o-calc(100vh - 56px);
  height: calc(100vh - 56px);
}

Codepen：https://codepen.io/brooksrelyt/pen/omKvGK