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