CODEWITHSUNDEEP
bootstrap-4
bp123
bp123

Reputation: 3417

Bootstrap 4 container 100% height has overflow

I'm using bootstrap 4. This question has been asked and answered, however, the questions never take into consideration a navbar.

Whenever I make a container height 100% using h-100 and there is a navbar above it I get an overflow in the container the height of the navbar.

I want to vertically and horizontally centre a component within the container, however, due to the overflow of the container the verticle centering is out by the height of the navbar.

What am I not understanding with h-100?

Path: 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>

Path: CSS

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

Upvotes: 0

Views: 305

Answers (1)

brooksrelyt
brooksrelyt

Reputation: 4033

If you subtract the height of the navbar you will have a 100% view height:

.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

Upvotes: 1

Related Questions