white space appearing below div

Question

EDIT new jsfiddle here which successfully replicates the issue

I have this white space appearing below my div.

Shown here in 2 photos, one is scrolled down:

I want to get rid of the whitespace. The web page should take up 100% of the viewport when including the navigation bar, so it should change when the viewport changes, and it does, and it is the right size, but then there is some random white space below the page that you can scroll down to. The white space looks to be the exact size of the navigation bar. How do I get rid of that white space? Please attempt to on the jsfiddle

code:

<nav class="navbar navbar-dark navbar-fixed-top">
    <div class="container-fluid">
        <button     class="navbar-toggler hidden-md-up pull-xs-right" 
                    type="button" 
                    data-toggle="collapse" 
                    data-target="#nav-content">
                    &#9776;
        </button>
        <a class="navbar-brand" href="#">THE VEGAN REPOSITORY</a>
        <div class="collapse navbar-toggleable-sm" id="nav-content">
            <ul class="nav navbar-nav pull-xs-right">
                <li class="nav-item">
                    <a class="nav-link" href="#">FIND</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ADD</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">LOGIN</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">SIGN UP FREE</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div id="landing-page" class="text-uppercase">
    <div class="container-fluid" style="height: 100%;">
        <div class="row hidden-lg-up" style="height: 20%;">
            <div class="col-xs-3 flex-xs-middle">
                <img width="100" src="images/monster2.png" />
            </div>
            <div class="col-xs-3 offset-xs-6 flex-xs-middle">
                <img class="pull-xs-right" width="100" src="images/monster4.png" />
            </div>
        </div>
        <div class="row" id="middle-row">
            <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top 
                flex-sm-middle">
                <img width="80%" src="images/monster2.png" />
            </div>
            <div class="col-md-12 col-lg-6 flex-xs-middle ">
                <div style="text-align: center;">
                    <h5 class="display-6">the vegan repository</h5>
                    <h1 class="display-3">
                        find vegan stuff* near you.
                    </h1>
                                        <a id="try-now-button" class="with-border clickable" href="#search-filter-page">
                        <h5 class="text-center medium-text">try now</h5>
                    </a>
                </div>
            </div>
            <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down 
                flex-xs-top flex-sm-middle">
                <img class="pull-xs-right" width="80%" src="images/monster4.png" />
            </div>
        </div>
        <div class="row" style="height:5%;">
            <h4 class="display-6 flex-xs-bottom">
                *Stuff like restaurants, meat alternatives, 
                dairy alternatives, and much more!
            </h4>
        </div>
    </div>
</div>

css:

#landing-page {
  background-color: dimgray;
  height: calc(100% - 50px);
  margin-top: 50px;
  overflow-y: auto;
  padding: 10px 40px 10px 40px;
  min-height: 396px; }

h1 {
  font-size: 10vmin;
  color: #FFF; }

h5 {
  color: rgba(255, 255, 255, 0.7); }

h4 {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7); }

/* MORE THAN 75 (XL) */
#middle-row {
  height: 95%; }

/* LESS THAN 75 (LG) */
@media (max-width: 74.9em) {
  #middle-row {
    height: 95%; } }
/* LESS THAN 62 (MD) */
@media (max-width: 61.9em) {
  #middle-row {
    height: 75%; } }
/* LESS THAN 48 (SM) */
@media (max-width: 47.9em) {
  #middle-row {
    height: 75%; } }
/* LESS THAN 34 (XS) */
@media (max-width: 33.9em) {
  #middle-row {
    height: 75%; } }

.navbar-toggler {
  color: rgba(255, 255, 255, 0.7); }

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.7); }

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #FFF; }

nav {
  background-color: #fc4747; }


  html, body {
  height: 100%; }

EDIT new jsfiddle here which successfully replicates the issue

Answer 1

In the CSS if you want to specify height property using percents you must specify height of the parent container. so, in your case, your #landing-page element have its parents <body> tag, and <body> tag have its parent <html> tag. That's why you must state:

html, body { height: 100%; }

in you css.

Another issue is here:

<div class="row hidden-lg-up" style="height:20%;">
    ...
</div>
<div class="row" style="height:95%;">
    ...
</div>
<div class="row" style="height:5%;">
    ...
</div>

try to sum all of the heights =) change it so they in sum will make 100% and you will get what you want

---

UPDATE

I've managed to reproduce your problem locally, so here is the solution.
Actually, you have issue not with white line at the bottom, the main culprit of the bottom while line is margin-top property of #landing-page element =).
Look, if you remove <nav> element, you will see the same white line at the top. It appears that you set up height of 100% for #landing-page and than shifted it to bottom. Browser than draws background at 100% of visible space, but, as you can notice, you have some vertical scroling and everything that is under that scroll doesn't have background-color.

In general, margin's are tricky where it comes to background-color or background-image as it may lead to current (or similar) problem. Move margin-top value to padding-top value to have same spacing, than remove calc() from the height property, like this:

#landing-page {
  background-color: dimgray;
  height: 100%; /* just 100% */
  overflow-y: auto;
  padding: 60px 40px 10px 40px; /* added margin-top to padding-top */
  min-height: 396px; }

Answer 2

Set the background-color on body instead of a div, will solve your problem.

Answer 3

In the jsfiddle we can't see the whitespace, so the problem may come from the html / body tags. If they are always at 1155px no matter how much you resize, try setting the html and body height to 100% :

html, body { height: 100%; }