セクションがfullpage.jsのウィンドウよりも大きいのはなぜですか？

Question

私はfullpage.js拡張を使用して自動スクロールを実装しています。私はフッタを作成し、それをページの下部に配置しました。ただし、セクション（緑色の境界線で示されている）は、以下に示すようにウィンドウよりも大きいので表示されません。

私は自動スクロールをオフにすると下図のように、私は、ページの下部にフッターを見つけます。

私はfullpage.jsセクションは、ウィンドウのサイズを取ることを仮定し、なぜこの出来事で、私はこれをどのように修正すればよいしている？仮定

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：あなたはおそらくbox-sizing: border-boxを使用していない

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

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

Answer 1

。

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>