Bootstrap 4 容器 100% 高度溢出答案

【问题标题】：Bootstrap 4 container 100% height has overflowBootstrap 4 容器 100% 高度溢出
【发布时间】：2019-07-17 01:11:31
【问题描述】：

我正在使用 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%;
}

【问题讨论】：

标签： bootstrap-4

【解决方案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

【讨论】：