Why is section larger than window for fullpage.js?

Question

I'm using fullpage.js extension to implement automatic scrolling. I created a footer and placed it at the bottom of the page. However, it doesn't show up because the section (which is illustrated by the green border) is larger than the window as shown below.

When I turn off automatic scrolling, I find the footer at the bottom of the page as shown below.

I assumed fullpage.js sections are suppose to take up the size of the window, so why is this happening and how do I fix this?

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

You are probably not using box-sizing: border-box.

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>