Klebrige Fußzeile hat einen unteren Rand

Question

Bevor die ': last-child' -Eigenschaft hinzugefügt wurde, gab es einen Abstand zwischen 'div.stickyFooter' und 'footer.siteFooter'. Jetzt scheint der Rand an den unteren Rand der Fußzeile verschoben zu werden und die Bildlaufleiste ist immer noch vorhanden, was ich nicht möchte.

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 wird Ihre erste Probleme erklären.

... Diese Regeln gelten auch für Ränder, die Null sind, so dass die Marge eines ersten/letzten Kindes außerhalb des Elternteils endet (gemäß den obigen Regeln), ob der Eltern-Rand gleich Null ist oder nicht.

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

hat dann Körper ein margin:1em; zu 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>

zurücksetzen