Need a gap at bottom of absolute div - html

Question

I currently have an absolute div that I use for the main content of the page, I need to create a space at the bottom of the div, to allow the footer to show. The footer is fixed, so the absolute div is treated as the last element I guess, thus meaning that there's no space at the bottom, the idea is to create a sort of scrollin effect like so:
First scroll in
This is on a larger screen, but the issue comes when it's rendered on a smaller screen, as there just seems to be no space at the bottom of the main content div.
Here's what I have currently:-
HTML:
<div id="container">
<div id="Navigation" class="transparent">
<div id="nav" class="transparent">
<div class="wrapper" class="transparent">
<div class="navigation" class="transparent">
<ul class="navigation-elements transparent" styles="cursor: pointer;margin-left: 10px;">
<li id="logo-li">
<a href="http://cms.manciniyoungphotography.com">
<img src="/img/logo.png" title="Mancini Young Photography" alt="Mancini Young Photography" id="icon"/>
</a>
</li>
<li style='cursor: pointer;' id='navigation-link' class='blog' onClick="navClick(this); autoScroll('blog');">
Blog
</li>
<li style='cursor: pointer;' id='navigation-link' class='contact' onClick="navClick(this); autoScroll('contact');">
Contact
</li>
<li style='cursor: pointer;' id='navigation-link' class='portfolio' onClick="navClick(this); autoScroll('portfolio');">
Portfolio
</li>
<li style='cursor: pointer;' id='navigation-link' class='about-us' onClick="navClick(this); autoScroll('about-us');">
About Us
</li>
<li style='cursor: pointer;' id='navigation-link' class='home selected' onClick="navClick(this); autoScroll('home')">
<!--<span class="glyphicon glyphicon-home" style="float: left;margin-left: 10%;"></span>-->
Home
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="main" style='background: #dadada url("/img/background_shapes.png") repeat-y scroll center top, url("/img/blue_bg.png") repeat-x scroll left top transparent;'>
<div class="shapes">
<div id="inner-main">
<div class="wrapper">
<div id='firstBlockContainer'>
<div id='FBL'>
<div id="canvas-one" ></div>
<div id="canvas-two" ></div>
<div id="canvas-three" ></div>
<div id="home" class="parallax-cont"></div>
<div id="about-us" class="parallax-cont">
<div id="about-content" class="generic">
<div class="title">This is the title</div>
Hello, this is where the content for Mancini Young Photography's about us section will go.
</div>
</div>
<div id="portfolio" class="parallax-cont"></div>
<div id="contact" class="parallax-cont">
<div id="contact-us-header">
<img src="/img/logo.png" />
</div>
<div id="contact-us-form">
<form name="contact-us" method="POST" action="">
<input class="form-control" type="text" placeholder="Name" class="contact-form" />
<input class="form-control" type="text" placeholder="Email" class="contact-form" />
<input class="form-control" type="text" placeholder="Company Name" class="contact-form" />
<input class="form-control" type="text" placeholder="Website" class="contact-form" />
<input class="form-control" type="text" placeholder="Telephone No." class="contact-form" />
<input class="form-control" type="textarea" placeholder="Message" class="contact-form" />
<input type="submit" class="form-control" />
</form>
</div>
</div>
<div id="blog" class="parallax-cont">
<div class="previous-button"></div>
<div id="blog_container">
<div id="postContainer"></div>
</div>
<div class="next-button"></div>
</div>
<div id="main-content"></div>
<script type="text/javascript" src="/js/blog-post-loader.js"></script>
</div>
</div>
</div>
</div>
</div>
<div id="footer" >
<div class="wrapper">
<div class="left leftFooter">
<ul class='selected' style='color: #fafafa'>
<a href='http://cms.manciniyoungphotography.com' >Home</a>
</ul>
<ul>
<a href='#portfolio' style='color: #fafafa;'>Portfolio</a>
</ul>
<ul>
<a href='#blog' style='color: #fafafa;'>Blog</a>
</ul>
<ul>
<a href='#about' style='color: #fafafa;'>About Us</a>
</ul>
<ul>
<a href='#contact' style='color: #fafafa;'>Contact</a>
</ul>
</div>
<div id="userFooterContents" ></div>
</div>
</br>
</div>
</div>
CSS:
#main-content {
z-index: 20;
position: absolute;
top: 90%;
width: 100vw;
background: #dadada;
border-top: #0c0c0c;
height: 100vh;
min-height: 800px;
vertical-align: top;
}
#footer {
position: fixed;
z-index: 0;
bottom: 0;
min-height: 10%;
background: #26262B;
box-shadow: -1px -2px 8px #0c0c0c;
padding: 20px;
width: 100%;
}
#copyright {
position: fixed;
z-index: 2;
bottom: 0;
float: left;
background: #0c0c0c;
color: #A69F88;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#main-content is the area where the main body of the content is, and the gap I need is to show #footer and #copyright
Here's the working example of the website:
http://cms.manciniyoungphotography.com/

Answer 1

if i understand this right you probably make things a bit too complicated, but that's just me. :)
try these changes:
#main-content {
top: 0;
z-index: 0;
}
#footer {
z-index: 1;
}

Answer 2

For what I understand, you're going for full screen. There are many approaches, but try this:
#main-content {
z-index: 20;
position: absolute;
top: 0;
bottom:0;
left:0;
right:0;
width: 100vw;
background: #dadada;
border-top: #0c0c0c;
height: 100%;
min-height: 800px;
vertical-align: top;
padding-bottom:10%;
z-index:-1;
}
#footer {
position: fixed;
z-index: 0;
bottom: 0;
min-height: 10%;
background: #26262B;
box-shadow: -1px -2px 8px #0c0c0c;
padding: 20px;
width: 100%;
z-index:2;
}
#copyright {
position: relative;
z-index: 2;
bottom: 0;
float: left;
background: #0c0c0c;
color: #A69F88;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}