css - 粘性页脚有底部边距

Question

在添加 ':last-child' 属性之前，'div.stickyFooter' 和 'footer.siteFooter' 之间有一个边距。现在边距似乎移到了页脚的底部，滚动条仍然存在，这是我不想要的。

http://i.imgur.com/5R4cIa7.jpg

<div id="stickyFooter">
  <header class="siteNav">
    <div class="contain">
      <h1 class="mainHeading">Sticky Footer</h1>
      <nav>
        <ul>
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
          <li>Four</li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="contain">
    <!-- Text -->
  </section>
</div>
<footer class="siteFooter">
  <p>&copy; 2016 Author</p>
</footer>

CSS

.siteNav {
  background: red;
  text-align: center;
}

.siteNav li {
  display: inline-block;
  margin: 0 40px;
}

.siteNav a {
  padding: 15px 25px;
}

.mainHeading {
  margin-top: 0;
}

.siteNav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contain {
  max-width: 70%;
  margin: 0 auto;
}

.siteFooter {
  background: gold;
  text-align: center;
  padding: 1.33em;
}

#stickyFooter {
  min-height: calc(100vh - 93.5313px);
}

p:last-child {
  margin-bottom: 0;
}

Answer 1

margin collapsing将解释您的第一个麻烦。

... These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

然后 body 有一个 margin:1em; 重置为 0

.siteNav {
  background: red;
  text-align: center;
}

.siteNav li {
  display: inline-block;
  margin: 0 40px;
}

.siteNav a {
  padding: 15px 25px;
}

.mainHeading {
  margin-top: 0;
}

.siteNav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contain {
  max-width: 70%;
  margin: 0 auto;
}

.siteFooter {
  background: gold;
  text-align: center;
  padding: 1.33em;
}

#stickyFooter {
  min-height: calc(100vh - 93.5313px);
}

p:last-child {
  margin-bottom: 0;
}

body {
  margin:0;
  }

<div id="stickyFooter">
  <header class="siteNav">
    <div class="contain">
      <h1 class="mainHeading">Sticky Footer</h1>
      <nav>
        <ul>
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
          <li>Four</li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="contain">
    <!-- Text -->
  </section>
</div>
<footer class="siteFooter">
  <p>&copy; 2016 Author</p>
</footer>