Липкий нижний колонтитул имеет нижнее поле

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 объяснит свою первую проблему.

... Эти правила применяются даже к полям, которые равны нулю, поэтому край первого/последнего ребенка заканчивается вне его родителя (в соответствии с вышеприведенными правилами) независимо от того, является ли поле родителя равным нулю.

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>