Getting container to stretch to the bottom of the browser - html

Question

I'm helping working on a website for a friend. I'm very new to this and can't get the white container to stretch to the very bottom of the browser page.
Here is the link
html, body {
background-color: transparent;
text-align:center;
text-rendering: optimizelegibility;
margin: 0px;
}
#wrapper {
width: 100%;
max-width: 1088px;
margin: 0 auto;
}
#sitecontainer {
position: relative;
background-color: rgba(255,255,255,0.84);
width: 80%;
max-width: 1038px;
margin: 0 auto;
height: 100%;
padding-right: 30px;
padding-left: 30px;
top: 0;
min-height: 100%;
}
main {
width: 100%;
height: 100%;
margin: 0 auto;
line-height: 1.4;
position: relative;
}
a {
font-family: 'roboto', sans-serif;
font-weight: 500;
color:#3d7109;
text-transform:uppercase;
text-decoration: none;
}
a #footer{
font-family: 'roboto', sans-serif;
font-weight: 300;
text-decoration:none;
text-transform:none;
}
a:hover {
opacity: 0.7;
}
header img {
width: 100%;
max-width: 300px;
font-style: none;
padding-top: 30px;
}
header h2 {
font-family: 'roboto', sans-serif;
font-weight: 500;
font-size: 14px;
text-align: center;
}
h1 {
font-family: 'roboto', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-align:center;
font-style:normal;
}
/* ===================
Nav
=================== */
nav {
margin: auto;
margin-bottom: 30px;
max-width: 700px;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
#menu {
padding: 0;
margin-right: 10px;
margin-left: 10px;
}
#menu li {
display: inline-block;
margin-right: 30px;
margin-bottom: 5px;
font-size: 17px;
text-align: center;
}
#menu li:last-child {
margin-right: 0;
}
/* ===================
Content
=================== */
p {
font-family: 'roboto', sans-serif;
font-weight: 300;
text-align:center;
}
.indexpage article {
margin-bottom: 85px;
}
article:before {
content: "";
display: block;
background: #3f474c;
width: 6px;
height: 1px;
margin-bottom: 16px;
}
.permalinkpage article:before {
margin: 0 auto 16px;
}
.permalinkpage .post {
margin: auto;
font-size: 14px;
letter-spacing: 0.9px;
}
.permalinkpage p {
margin: 24px 0;
}
/* Text */
.permalinkpage .text .post {
width: 100%;
max-width: 500px;
margin: auto;
}
<div id="wrapper">
<div id="sitecontainer" height="100%">
<!---------- HEADER / LOGO ---------->
<header class="wrapper clearfix">
<section id="blog-title">
<h1 style="margin-top: 0px; margin-bottom: 0px;">
<img src="files/images/logo.gif" alt="Healing by Andrea"/>
</h1>
</section>
</header>
<!---------- NAV START ---------->
<nav>
<ul id="menu">
<li>
Home
</li>
<li>
Crystals
</li>
<li>
Bio
</li>
<li>
Rates
</li>
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
</nav>
<!---------- NAV END ---------->
<main class=" permalinkpage">
<!---------- CONTENT ---------->
<div class="grid-sizer"></div>
<article class="text">
<section class="post">
<h1 class="post-title" >"What is Reiki?"</h1>
<article class="type_description"><div class="article-content">
<div class="boxed">
<p>The word Reiki is made of two Japanese words - Rei which means "God's Wisdom or the Higher Power" and Ki which is "life force energy". So Reiki is actually "spiritually guided life force energy."
</p>
<p>A treatment feels like a wonderful glowing radiance that flows through and around you. Reiki treats the whole person including body, emotions, mind and spirit creating many beneficial effects that include relaxation and feelings of peace, security and wellbeing. Many have reported miraculous results.
<br>
Reiki is a simple, natural and safe method of spiritual healing and self-improvement that everyone can use. It has been effective in helping virtually every known illness and malady and always creates a beneficial effect. It also works in conjunction with all other medical </p>
</div>
</div>
</article><!-- Javascript Assets --><p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script><script src="http://static.tumblr.com/e6lc7yi/7rPn0ryx1/gobig-plugins.js" type="text/javascript"></script></p>
<section class="post-meta">
</section>
</section>
</article>
</main>
</div>
</div>
Any ideas?

Answer 1

html, body {
height: 100%;
}
#wrapper {
height: 100%;
}
Adding these will help you achieve what you are after