删除移动设备页面底部的正文空格

Question

我不知道是什么原因导致空格仅在移动设备上显示在页面页脚下方。 我将正文设置为红色，因此知道是正文而不是HTML引起的。 我尝试将HTML和body的padding和margin设置为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

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

      <plugins>
    <config>
      <ohr:offheap-resources>
        <ohr:resource name="default-resource" unit="MB">512</ohr:resource> 
      </ohr:offheap-resources>
    </config>
  </plugins>

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

Answer 2

尝试：

git pull -f origin master     //The -f flag stands for force

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