Question

我正在使用引导程序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

Bootstrap 4容器100％高度溢出

1 个答案: