スティッキーフッタにボトムマージンがあります

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

次いで本体は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>

にリセットする margin:1em;を有します