Fullpage.js extension with footer which is not on full page

HTML

<div id="fullpage">
	<div class="section " id="section0">
		<h1>Section 1</h1>
	</div>
	<div class="section" id="section1">
		<div class="intro">
			<h1>Section 2</h1>
		</div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<h1>Section 3</h1>
		</div>
	</div>
    <div class="section" id="section-footer">
				<div id="footer-text">
					<p>Yes, this is the footer. Enjoy!</p>
                    <p>Yes, this is the footer. Enjoy!</p>
                    <p>Yes, this is the footer. Enjoy!</p>
				</div>
			</div>
</div>

CSS

.section
{
    border: 1px solid red;
}
#section-footer #footer-text
{


	margin: 0 auto;
    padding: 20px 0;
}
#section-footer p
{
	text-align: center;
}
p
{
    margin: 0 0 10px;
}

JavaScript

(function($) {
	$.fn.fullpage = function(options) {
		// Create some defaults, extending them with any options that were provided
		options = $.extend({
			//navigation
			'menu': false,
			'anchors':[],
			'navigation': false,
			'navigationPosition': 'right',
			'navigationColor': '#000',
			'navigationTooltips': [],
			'slidesNavigation': false,
			'slidesNavPosition': 'bottom',
			'scrollBar': false,

			//scrolling
			
	});
	
});
});(jQuery);

$('#fullpage').fullpage({
		anchors: ['section-1', 'section-2', 'section-3', 'footer']
	});