Remove body whitespace at bottom of page on mobile

Issue

I can't figure out what's causing whitespace to appear below my page's footer on mobile only. I set the body to red so know the body, not the HTML, is causing it. I tried setting padding and margin to 0 for both HTML and body but it's still there. (Setting the margin to 0 does remove a default 8px margin on the edges of the screen, but padding: 0 doesn't do anything.)

@charset "utf-8";

/* CSS document */

body,
td,
th,
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  color: #333;
  line-height: 1.5;
}

body {
  /* Displayed at bottom on mobile */
  background-color: #db2626;
  /* Removes border that appears around sides of screen */
  margin: 0;
  /* padding: 0; */
  /* TODO: Does this do anything */
  /* position: relative; */
}

ul,
li {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  color: #333;
}

a {
  color: orange;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #288dd1;
  text-decoration: none;
}


/* TODO: Find out what this applies to */

a img {
  /* Shorthand for border-width, border-style, border-color */
  border: 0 none #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 20px;
}


/* Applies to restaurant hours table, and causes table to render more quickly. Whereas in the default table-layout property value of auto, in which column width is set by widest unbreakable content in cells (content dictating layout), with property value of fixed table and column widths are determined by width of table or col or by width of first row of cells. Column widths are split equally if widths not present in first row  */

table {
  table-layout: fixed;
}

#maincontent {
  background-color: #f3f3f3;
  /* TODO: Does this do anything */
  /* min-height: 100%; */
  /* TODO: This removes gap at bottom but makes middle section taller */
  /* height: 100vh; */
}

#main-restaurant {
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
}

#footer {
  background-color: #444;
  color: #dedede;
  font-size: 8pt;
  letter-spacing: 1px;
  padding: 25px;
  text-align: center;
  text-transform: uppercase;
}


/* ====================== Navigation ====================== */

nav {
  width: 100%;
  height: 80px;
  background-color: #252831;
  /* With display-flex instead of default display block, magin: auto applied to centers  */
  display: flex;
}

nav h1 {
  /*  With display-flex instead of default display: block applied to nav, magin: auto applied to h1 descendant of nav causes h1 to be centered */
  margin: auto;
}

nav h1 a {
  color: #fff;
  font-size: 14pt;
  font-weight: 200;
  letter-spacing: 10px;
  text-transform: uppercase;
}

#breadcrumb {
  padding: 10px 40px 16px;
  list-style: none;
  background-color: #eee;
  font-size: 17px;
  margin: 0;
}


/* Display list items side by side */

#breadcrumb li {
  display: inline;
}


/* Add slash symbol (/) before/behind each list item */

#breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: '/\00a0';
}


/* Add color to all links inside list */

#breadcrumb li a {
  color: #252831;
  text-decoration: none;
}


/* Add color on mouseover */

#breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}


/* ====================== Map ====================== */

#map {
  height: 400px;
  max-width: 100%;
  background-color: #ccc;
}


/* ====================== Restaurant filtering ====================== */

.filter-options {
  max-width: 100%;
  height: 50px;
  background-color: #3397db;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-options select {
  background-color: white;
  border: 1px solid #fff;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  height: 35px;
  letter-spacing: 0;
  margin: 10px;
  padding: 0 10px;
  max-width: 160px;
}


/* ====================== Restaurant listing ====================== */

#restaurants-list {
  background-color: #f3f3f3;
  list-style: outside none none;
  margin: 0;
  padding: 30px 15px 60px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-items: center;
  grid-gap: 20px;
}

#restaurants-list li {
  background-color: #fff;
  border: 2px solid #ccc;
  font-family: Arial, sans-serif;
  min-height: 380px;
  padding: 0 30px 25px;
  text-align: left;
  max-width: 270px;
}

#restaurants-list .restaurant-img {
  background-color: #ccc;
  display: block;
  margin: 0;
  max-width: 100%;
  min-height: 248px;
  min-width: 100%;
}

#restaurants-list li h1 {
  color: #bd5900;
  font-family: Arial, sans-serif;
  font-size: 14pt;
  font-weight: 200;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 20px 0 10px;
  text-transform: uppercase;
}

#restaurants-list p {
  margin: 0;
  font-size: 11pt;
}

#restaurants-list li a {
  background-color: #252831;
  border-bottom: 3px solid #eee;
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 10pt;
  margin: 15px 0 0;
  padding: 8px 30px 10px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}


/* ====================== Restaurant details ====================== */

.inside header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.inside #map-container {
  width: 100%;
  margin-top: 130px;
}

.inside #footer {
  bottom: 0;
  position: absolute;
  width: 95%;
}

#restaurant-name {
  color: #bd5900;
  font-family: Arial, sans-serif;
  font-size: 20pt;
  font-weight: 200;
  letter-spacing: 0;
  margin: 15px 0 30px;
  text-transform: uppercase;
  line-height: 1.1;
}

#restaurant-img {
  width: 50%;
}

#restaurant-address {
  font-size: 12pt;
  margin: 10px 0px;
}

#restaurant-cuisine {
  background-color: #333;
  color: #ddd;
  font-size: 12pt;
  font-weight: 300;
  letter-spacing: 10px;
  margin: 0 0 20px;
  padding: 2px 0;
  text-align: center;
  text-transform: uppercase;
  width: 50%;
}

#restaurant-container,
#reviews-container,
.reviews-form {
  border-bottom: 1px solid #d9d9d9;
  border-top: 1px solid #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#reviews-container {
  padding: 30px 40px 80px;
}

#reviews-container h2 {
  color: #252831;
  font-size: 24pt;
  font-weight: 300;
  letter-spacing: -1px;
  padding-bottom: 1pt;
}

#reviews-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

#reviews-list li {
  background-color: #fff;
  border: 2px solid #f3f3f3;
  margin: 0 0 30px;
  overflow: hidden;
  padding: 35px;
  width: 90%;
}

#reviews-list li p {
  margin: 0 0 10px;
  word-wrap: break-word;
}

#restaurant-hours {
  background-color: #fff;
  border: 2px solid #f3f3f3;
  overflow: hidden;
  padding: 20px;
}

#restaurant-hours td {
  color: #666;
}

.restaurant-icon {
  display: flex;
}

.restaurant-fav-icon {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}


/* Review form */

.form__heading {
  color: #252831;
  font-size: 24pt;
  font-weight: 300;
  padding-top: 1rem;
}

.form {
  display: flex;
  flex-direction: column;
}

.form>input,
.form>textarea {
  margin: 10px 0;
  padding: 10px;
  border-radius: 0.4rem;
}

.form__restaurant-id {
  display: none;
}

.form__submit {
  background-color: transparent;
  color: #252831;
  border: 1px solid #252831;
  border-radius: 0.4rem;
  padding: 1rem;
  letter-spacing: 0.5rem;
  text-indent: 0.5em;
}

.leaflet-container a {
  color: #252831 !important;
}


/* ====================== Media queries ====================== */


/* Small devices (portrait tablets, medium phones) */

@media screen and (min-width: 640px) {
  #restaurants-list {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Medium devices (landscape tablets and large phones) */

@media screen and (min-width: 960px) {
  #restaurants-list {
    grid-template-columns: repeat(3, 1fr);
  }
  #reviews-list li {
    max-width: 70%;
  }
}


/* Extra large devices (large laptops and desktops) */

@media screen and (min-width: 1200px) {
  #restaurants-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Restaurant Reviews</title>
</head>

<body>
  <header>
    <nav>
      <h1><a href="/">Restaurant Reviews</a></h1>
    </nav>
  </header>

  <main id="maincontent">
    <!-- Section: thematic grouping of content. A homepage is often split into sections for introduction, content, contact info -->
    <section id="map-container">
      <div id="map" role="application" aria-label="location"></div>
    </section>
    <section>
      <div class="filter-options">
        <select id="neighborhoods-select" name="neighborhoods" aria-label="neighborhoods" onchange="updateRestaurants()">
          <option value="all">All Neighborhoods</option>
        </select>
        <select id="cuisines-select" name="cuisines" aria-label="cuisines" onchange="updateRestaurants()">
          <option value="all">All Cuisines</option>
        </select>
      </div>
      <ul id="restaurants-list"></ul>
    </section>
  </main>

  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  <script type="application/javascript" charset="utf-8" src="js/dbhelper.js"></script>
  <script type="application/javascript" charset="utf-8" src="js/main.js"></script>
  <!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places&callback=initMap"></script> -->


  <footer id="footer">
    Copyright (c) 2018 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
  </footer>

</body>

</html>

Solution

Your problem might be that your content is not tall enough to fill up the screen, and it's ending up with some leftover room on the screen which is your red whitespace. Try adding the below code:

<body>
    <div id="main">
        <!--Put everything in here-->
    </div>
</body>

div#main {
    height: 100vh;
    background-color: lime; /*Just to see if it works*/
}

This should fix your problem.

Answered By - Jack Bashford