Warum ist Abschnitt größer als Fenster für fullpage.js?

Question

Ich verwende fullpage.js Erweiterung, um automatisches Scrollen zu implementieren. Ich habe eine Fußzeile erstellt und sie am Ende der Seite platziert. Es wird jedoch nicht angezeigt, da der Abschnitt (der durch die grüne Umrandung dargestellt wird) größer ist als das unten abgebildete Fenster.

Wenn ich automatische Scrollen ausschalten, finde ich die Fußzeile am unteren Rand der Seite, wie unten gezeigt.

Ich nahm fullpage.js Abschnitte sind annehmen, um die Größe des Fensters zu nehmen, also warum ist das passiert und wie kann ich dieses Problem beheben?

HTML:

<div class = "section contact" anchor = "4thPage"> 
      <ul> 
       <!-- buttons for GitHub, LinkedIn, Resume--> 
      </ul> 
      <div class = "footer"> © 2016 Full Name. All rights reserved. </div> 
</div> 

CSS:

.footer { 
    bottom: 0; 
    position: absolute; 
} 

.contact { 
    text-align: center; 
    padding-top: 5%; 
    position: relative; 
} 

Answer 1

Sie sind wahrscheinlich nicht box-sizing: border-box verwenden.

Reproduction online

.content{ 
    position:absolute; 
    border: 20px solid red; 
    bottom:0; 
    top:0; 
    width: 100%; 
     box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

HTML

<div class="section"> 
    <div class="content"> 
     One 
    </div> 
</div>