html - 删除移动页面底部的正文空格

Question

我无法弄清楚是什么导致空白出现在我的页面页脚下方，仅适用于移动设备。 我将正文设置为红色，所以知道是正文而不是 HTML 引起的。 我尝试将 HTML 和正文的填充和边距设置为 0，但它仍然存在。 (将边距设置为 0 会删除屏幕边缘的默认 8px 边距，但 padding: 0 不会执行任何操作。)

@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>

Answer 1

您的问题可能是您的内容不够高，无法填满屏幕，最终会在屏幕上留下一些剩余空间，即您的红色空白区域。尝试添加以下代码:

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

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

这应该可以解决您的问题。