UPDATE check out the new jsfiddle link here that effectively showcases the problem
I am encountering an issue with white space appearing below my div.
This can be seen in 2 photos, one of which is scrolled down:
https://i.sstatic.net/yHlXL.png
https://i.sstatic.net/KagOh.png
I want to eliminate this whitespace. The webpage should occupy 100% of the viewport including the navigation bar, adapting as the viewport changes. While it does change accordingly and displays the correct size, there remains random white space below the page that can be scrolled down to. Interestingly, the size of the white space matches that of the navigation bar. How can I remove this unwanted white space? Feel free to try solving it on the provided jsfiddle link
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">
☰
</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%; }
UPDATE new jsfiddle here which successfully replicates the issue