html - 删除 html 主体上的白色间隙

Question

实际上我得到了这个元素设置的页面布局。在最后一张 div 卡被接受后有一个很大的白色间隙。这是一个很大的空白，它会向下滚动。我相信这可能是一个 margin 问题，但无法确定在哪里。关于如何在不影响布局的情况下消除这个大差距的任何想法。这是代码

body {
  background: rgba(117, 112, 112, 0.06);
}

.main-container {
  width: 960px;
  margin: auto;
  position: relative;
  background-color: white;
}

.headercontainer {
  margin-top: 20px;
  background-color: #ddf5ce;
}

.topfiller {
  background-image: url("../Images/Aztec2white.jpg");
  background-repeat: repeat-x;
}

img.RestLogo {
  position: relative;
  left: 7px;
}

.btmfiller {
  background-image: url("../Images/Aztec2white.jpg");
  background-repeat: repeat-x;
  margin-bottom: -5px;
}

.pic-filler {
  margin-top: -25px;
}

#pic-filler {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#mainMotto {
  font-family: 'Rock Salt', cursive;
  color: rgba(11, 123, 40, 0.86);
  font-size: 110%;
  letter-spacing: -1.5px;
  position: absolute;
  top: 35px;
  left: 290px;
}

.headercontact p {
  display: block;
  position: absolute;
  top: 30px;
  left: 780px;
  line-height: 60%;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 87%;
  color: brown;
}

.headercontact span {
  font-weight: bold;
  font-size: 130%;
}

.headercontact a {
  text-decoration: none;
  font-family: 'Frank Ruhl Libre', sans-serif;
  color: #921f0c;
}

.headerschedule {
  display: block;
  position: absolute;
  left: 325px;
  top: 120px;
}

.headerschedule p {
  line-height: 70%;
  font-size: 20px;
  color: #0B3504;
  font-size: 95%;
  font-weight: 600;
}


/*social media icons*/

.socialmedia {
  position: absolute;
  top: 145px;
  left: 800px;
  letter-spacing: 2px;
}

.socialmedia a {
  display: inline-block;
}


/*Navigation Menu*/

.navigationbar {
  margin: 0px;
  border-top: 1px solid rgba(106, 180, 83, 0.82);
}

.navigationbar ul {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

.navigationbar li {
  display: inline-block;
  margin-top: 10px;
  list-style: none;
  margin-right: 15px;
  padding: 10px 15px;
  font-family: 'Indie Flower', cursive;
  font-size: 120%;
  text-transform: uppercase;
  background-color: #e0ecd2;
  border: 2px solid rgba(106, 180, 83, 0.82);
  border-radius: 16px;
}

.navigationbar a {
  display: block;
  color: #928c1e;
  text-decoration: none;
}

nav li:hover {
  background: #d0edaf;
}

@media screen and (max-width: 700px) {
  .navigationbar li {
    width: 50%;
  }
}


/*End of Navigation Menu*/


/*Body content*/

.bodytxtcontent {
  padding-left: 20px;
  padding-right: 20px;
  text-align: justify;
}

.body-paragraph {
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: 'Cormorant Upright', serif;
  font-size: 150%;
  line-height: 130%;
  color: rgba(38, 150, 44, 0.9);
  font-weight: bold;
}

.bodyimg {
  max-width: 45%;
  box-sizing: border-box;
  float: right;
  margin: 7px 0 0 15px;
}


/*Not showing next to body-paragraph*/

#cantinapic {
  max-width: 100%;
  height: auto;
}


/*end of body content*/


/*Table content*/

.tablecontainer {
  background-image: url(../Images/Tacos-de-Barbacoa1.png);
  background-repeat: no-repeat;
  background-size: cover;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  margin-top: 25px;
  width: 100%;
}

table td {
  padding: 10px;
  border: 2px solid green;
  font-size: 18px;
  color: #11100f;
  text-align: center;
}

tr .items-header {
  font-weight: bold;
  text-align: right;
  font-size: 22px;
  padding: 10px;
}


/*End of Table content*/


/*Contact Us*/

form {
  background-color: #efe9e9;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  border-radius: 7px;
}

.First-Half {
  width: 60%;
  float: left;
  margin-top: 30px;
}

.First-Half h2 {
  color: #2f2fa5;
  text-align: center;
  margin-right: 20px;
}

address {
  line-height: 75%;
  font-size: 20px;
  text-align: center;
}

.First-Half p {
  text-align: center;
  font-size: 20px;
  font-style: italic;
}

.First-Half a {
  text-decoration: none;
  margin-left: 12em;
  font-size: 17px;
  font-style: italic;
}

iframe {
  margin-top: 10px;
  margin-left: 5em;
  box-shadow: 10px 10px 5px #aaaaaa;
  border-radius: 5px;
}

table .table-schedule td {
  text-align: left;
  border: none;
}

.days {
  width: 25%;
  font-weight: bolder;
}

.time {
  width: 75%;
}

.Second-Half {
  width: 35%;
  float: left;
  margin-top: 30px;
}

.Second-Half h3 {
  color: #443c3e;
  line-height: 87%;
}

label {
  font-family: 'Frank Ruhl Libre', sans-serif;
}

.hidden-label {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  display: block;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px 10px;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 100%;
  border: 1px solid #CDCDCD;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
  border: 1px solid #CDCDCD;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}

input[type="submit"] {
  display: block;
  width: 60%;
  box-sizing: border-box;
  margin: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: #9b8181;
  border: 1px solid #9b8181;
  border-radius: 3px;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 100%;
}

input[type="submit"]:focus,
input[type="submit"]:hover {
  border: 1px solid #CDCDCD;
  background-color: rgba(155, 129, 129, 0.84)
}

textarea {
  display: block;
  box-sizing: border-box;
  margin: 10px;
  border: 1px solid #CDCDCD;
  border-radius: 3px;
}

textarea:focus {
  border: 1px solid #CDCDCD;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}


/*End of Contact Us*/


/*footer section*/

#footer {
  width: 960px;
  margin-top: 100%;
  padding: 5px;
  text-align: center;
  font-size: 18px;
  background-color: #e6f9da;
}

.cardsaccepted {
  width: 725px;
  margin: 10px 15px;
}

#copyright {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #9c9898;
}

#cards-accepted {
  max-width: 35%;
  height: auto;
}

.cards-paragraph p {
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 85%;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Taqueria El Perico Loco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Custom styles for this template -->


  <link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Upright" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  <link href="CSS/style.css" rel="stylesheet">
</head>

<body>

  <div class="main-container">
    <div class="headercontainer">
      <div class="topfiller">
        <img src="Images/Aztec2white.jpg">
        <!--Needs to be background img and repeat x-->

      </div>
      <!--end of topfiller div-->

      <a href="index.html"><img class="RestLogo" src="Images/Pericos-Restaurant.jpg" alt="El Perico Loco" width="135" height="auto"></a>

      <div class="restaurantmotto">

        <h1 id="mainMotto">Authentic Mexican Food with Tradition</h1>

      </div>
      <!--end of restaurantmotto-->

      <div class="headercontact">

        <p><span>Come visit us at</span>
          <br></br>
          150 Coronado Ave
          <br></br>
          Daly City, CA 94051
          <br></br>
          650.758.1000
          <br></br>
          <a href="mailto:info@elpericoloco.com">info@elpericoloco.com</a></p>

      </div>
      <!--end of headercontact-->

      <div class="headerschedule">

        <p>Sundays thru Thursdays: 11am - 11pm
          <br></br>
          Fridays & Saturdays: 11am to midnight</p>

      </div>
      <!--end of headerschedule-->

      <div class="socialmedia">
        <a href="http://www.facebook.com"><img src="Images/apple-touch-icon-precomposed.png" width="30" height="30"></a>
        <a href="http://www.twitter.com"><img src="Images/Twitter_icon.png" width="30" height="30"></a>
        <a href="http://www.google.com"><img src="Images/GooglePlus-logos-02.png" width="30" height="30"></a>
      </div>
      <!--end of div social media-->

      <div class="btmfiller">
        <img src="Images/Aztec2white.jpg">
        <!--Needs to be background img and repeat x-->

      </div>
      <!--end of btmfiller div-->
    </div>
    <!--end of headercontainer div-->



    <nav class="navigationbar">
      <ul class="group">
        <li><a href="index.html">Home</a></li>
        <li><a href="Menu.html">Menu</a></li>
        <li><a href="Contact.html">Contact</a></li>
      </ul>
    </nav>


    <div class="bodytxtcontent">
      <br></br>
      <h3></h3>
      <div class="pic-filler">
        <img id="pic-filler" src="Images/static1.squarespace.com.png" alt="pic filler">

      </div>
      <!--end of pic-filler div-->

      <div class="body-paragraph">

        <div class="bodyimg">

          <img id="cantinapic" src="Images/cantinabqt.jpg" alt="Inside Restaurant">
        </div>
        <!--end of bodyimg div-->

        <p>Growing up in La Estancia de Los Lopez, Nayarit Mexico and being the oldest of seven, I gravitate to one of the family businesses. My father's love of butchering and breaking down carcass, turn into a taco stand in front of our house. Being my
          father's apprentice, I would rush home from school to cook all our meats and learn his cooking skills. Although, I loved learning new cooking skills the best part of it, was spending one on one time with my father.</p>

        <p>As I spent more and more time in the kitchen, I began to realize how much flavor meant to me. I found myself many times creating new recipes that one day I dreamed of putting out in my restaurant. A dream that for many years seemed surreal, until
          I meet my wife who helped develop the menu that has made us who we are today in the restaurant industry.</p>

        <p>We started in 1999 as a street vendor on East 14th and 42nd in Oakland and progressively brought our Mexican flavors to our home town in San Leandro in 2007.</p>
      </div>
      <!--end of body-paragraph-->



    </div>
    <!--End of bodytxtcontent-->


    <div class="cardsaccepted">

      <img id="cards-accepted" src="Images/all cards accepted.jpg" alt="Cards Accepted image">

      <div class="cards-paragraph">
        <p>We proudly accept this cards. No Minimum!</p>
      </div>
      <!--end of cards-paragraph-->

    </div>
    <!--end of cardsacceped div. It wraps img cards id=cards-acepted and cards-paragraph -->



    <footer id="footer">

      <span id="copyright"> &copy;All Rights Reserved 2016</span>
    </footer>

  </div>
  <!--End of main-container div-->



</body>



</html>

Answer 1

只需从 #footer 中删除 margin-top: 100%。

为什么你仍然需要那个边距？