Question

在添加＆＃39;：last-child＆＃39;之前财产在＆＃39; div.stickyFooter＆＃39;之间存在差距。和＆＃39; footer.siteFooter＆＃39;。现在边距似乎移动到页脚的底部，滚动条仍然存在，我不想要。

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将解释您的第一个麻烦。

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

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>

粘性页脚有一个底部边距

1 个答案: