MyBB Community Forums

on my site (nstygaming.com)
I want to expand the midsection which is the dark part that contains the slideshow and text. I have the height at 100% for that div but it wont expand all the way down for some reason. Can I get some help?

Coding HTML:

<div id="midsection">
<div id="myreel"></div>
<div class="paginate"></div>
<div id="opening"><br /><hr /><br /><a class="bottomtext"><span>Welcome to NsTyGaming,</span></a>
<p class="bottomtexttwo"><span>Hi all, welcome to NsTy's newest project. I am Adam, the developer of the site. We are working vigorously on the website and hope for it to be up in August. All coding and graphics making is completely 100% custom by me and this is part of the reason why it will take awhile for the website to be up. Many new features include (Forum, Website Accounts and More). Stay tuned, as we continue to update the site. Thanks for dropping by.</span></p>
</div>
<br />
<div id="bar"></div>
<div id="positive">
<ul id="toocome">
<li><span>99.99% Uptime Guranteed!</span></li>
<li><span>Member System With Benefits</span></li>
<li><span>Free Forums</span></li>
<li><span>Clan Battles</span></li>
<li><span>Much More...</span></li>
</ul>
</div>
<center>
<div id="menus"><a class="links"><span style="text-decoration: underline; color: white; font: 12pt Arial, Helvetica, sans-serif;">Quick Links:</span> </a>
<div id="bottomlinks">
<ul id="liinks">
<li><a href="#" style="text-decoration: none;"><span>Home</span></a></li>
<li><a href="#" style="text-decoration: none;"><span>Help</span></a></li>
<li><a href="#" style="text-decoration: none;"><span>Contact Us</span></a></li>
<li><a href="#" style="text-decoration: none;"><span>Forums</span></a></li>
</ul>
</div>
<div id="comingdate"><a class="comingdatetwo">Coming August 2013</a></div>
<div id="rightwall"></div>
</div>
</center></div>
</center>
</body>
</html>

Coding CSS:

body{
background-color: #4e4e4e;
padding:0;
margin:0
}

hr{
width:95%;
border:1px #0f0f0f solid;
}

#headerbackground{
width:100%;
height:100px;
background:#3f3f3f;
border-bottom: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
padding-top:5px;
padding-bottom:-10px;
}

#logo{
width:400px;
height:80px;
margin-left:5%;
margin-top:6px;
}

#midsection{
position:relative;
width:80%;
height:100%;
background:#252525;
border-right:1px black solid;
border-left:1px black solid;
border-bottom:1px black solid;
margin-left:-1px;
}

#myreel{
position:relative;
border: 2px grey solid;
top:10px;
}

#accountbar{
position:relative;
width:100%;
height:0px;
background:#262626;
margin-top:34px;

}

#twitter{
position:relative;
height:40px;
width:40px;
float:right;
margin-top:-62px;
margin-right:5%;
}


#twitch{
position:relative;
height:40px;
width:40px;
float:right;
margin-top:-62px;
margin-right:10%;
}

#youtube{
position:relative;
height:40px;
width:40px;
float:right;
margin-right:15%;
margin-top:-62px;
}

#facebook{
position:relative;
height:40px;
width:40px;
float:right;
margin-right:20%;
margin-top:-62px;
}

.bottomtext{
color:white;
float:left;
margin-left:5%;
font:14pt Arial, Helvetica, sans-serif
}

.bottomtexttwo{
color:white;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:60px;
font:12pt Arial, Helvetica, sans-serif
}

#menus{
position:relative;
margin: auto auto;
width:100%;
height:150px;
background:#3f3f3f;
border-top:1px black solid;
margin-top:200px;
border-left:1px black solid;
border-right:1px black solid;
}

.links{
float:left;
margin-left:5%;
margin-top:10px;
font:14pt Arial, Helvetica, sans-serif
color:white;
}

#bottomlinks{
position:relative;
align-text:left;
float:left;
top:20px;
margin-left:-125px;
width:20%;
border-right:1px white solid;
}


#liinks li {
    list-style-type: none;
text-align: left;
padding: 0px;
margin: 0px;
}

#liinks li:hover, #liinks li:hover a {
    color: #FFFFFF;
}

#liinks li a{
color:red;
font:10pt Arial, Helvetica, sans-serif
}

#comingdate{
position:relative;
width:55%;
height:80px;
margin-top:50px;
}

.comingdatetwo{
color:white;
font:30pt Arial, Helvetica, sans-serif;
}

#rightwall{
position:relative;
float:right;
margin-top:-115px;
margin-right:15px;
width:20%;
border-left:1px white solid;
height:115px;
}


#bar{
position:relative;
width:95%;
height:2px;
top:225px;
background:black;
}

#toocome li {
list-style-type: none;
text-align: left;
padding: 0px;
margin-top: 20px;
}

#positive{
position:relative;
margin-top:400px;
}

You can't define height in percentage. You should do it with pixels only.
If you at all need to achieve screen height use javascript to get the pix of screen at set the height at runtime.

on firefox, I clearly see that midsection is extended to bottom of the page. hard refresh your browser ?