粘性页脚具有底部边距答案

【问题标题】：Sticky footer has a bottom margin粘性页脚具有底部边距
【发布时间】：2016-07-07 08:53:09
【问题描述】：

在添加 ':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;
}

【问题讨论】：

标签： css footer sticky-footer

【解决方案1】：

margin collapsing 会解释你的第一个麻烦。

...这些规则甚至适用于零边距，因此无论父级的边距是否为零，第一个/最后一个子级的边距最终都会超出其父级（根据上述规则）。

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

然后正文有一个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>

【讨论】：