HTML/CSS - 100% Height Not truly 100&

Question

I seem to be constantly running into this problem, and I'm not sure where I'm making the mistake.

I have a main-body div that is holding a background-color that I want as the background of the page. Within the dive I've got a section class with the little sections that are going to be copied over and over again with just the content changed.

If you scroll to the bottom, you'll notice that the background of the main-body div isn't really 100% and leaves this white bar. How might I go about fixing this?

*
{
    margin: 0;
    padding: 0;
}

#header
{
    height: 230px;
    width: 100%;
    background-color: #0099CC;
    display: block;
}

#headerFixedWidth
{
    width: 85%;
    height: 230px;
    //border: 1px solid #ccc;
    margin: 0 auto;
}

#nav
{
    //border: 1px solid #ccc;
    height: 35px;
    width: 700px;
    margin: 0 auto;
    margin-top: 40px;
}

#mainBody
{
    background-color: #F1F4F9;
    width: 100%;
    //height: 100%;
    margin-bottom: 30px;
}

.left-content
{
    height: 550px;
    width: 581px;
    background-color: white;
    margin-left: 20px;
}

.title
{
    font-family: 'Lato', sans-serif;
    color: #ccc;
    font-size: 37px;
    font-weight: bold;
    color: #4E5E6A;
    margin: 20px 30px;
    text-shadow: rgba(78, 94, 106, .2) .1px .1px 2px -1px;
}

.author-subline
{
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #4E5E6A;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 30px;
}

.article-text
{
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    color: #4E5E6A;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 30px;
    margin-right: 10px;
    line-height: 1.56;
}

.readMore
{
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    color: #4E5E6A;
    margin-top: 15px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 10px;
}

 <div id="header">
  	<div id="headerFixedWidth"></div>
</div>

<div id="mainBody">
	<section class="left-content">
  	<p class="title">Minim perferendis placeat</p>
    <p class="author-subline">Minim perferendis placeat modi</p>
    <p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p> 
     <p class="readMore">Read More</p>
 		</section>

	<section class="left-content">
  	<p class="title">Minim perferendis placeat</p>
    <p class="author-subline">Minim perferendis placeat modi</p>
    <p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p> 
     <p class="readMore">Read More</p>
 		</section>
	
	<section class="left-content">
  	<p class="title">Minim perferendis placeat</p>
    <p class="author-subline">Minim perferendis placeat modi</p>
    <p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p> 
     <p class="readMore">Read More</p>
 		</section>
	
	<section class="left-content">
  	<p class="title">Minim perferendis placeat</p>
    <p class="author-subline">Minim perferendis placeat modi</p>
    <p class="article-text">Minim perferendis placeat modi, vitae porttitor exercitation dolorum duis atque ridiculus luctus earum!.</p> 
     <p class="readMore">Read More</p>
 		</section>
</div>

Answer 1

If you just change the #mainBody CSS property margin-bottom you should be fine!

#mainbody{
    background-color: #F1F4F9;
    width: 100%;
    //height: 100%;
    margin-bottom: 30px;
}

To this

#mainbody{
    background-color: #F1F4F9;
    width: 100%;
    //height: 100%;
}

Answer 2

Yo do not need a margin at the body (I also don´t know why are you using this...):

#mainBody {
  background-color: #F1F4F9;
  width: 100%;
}

Answer 3

It is because of the #mainBody having a margin:

Just remove the margin-bottom and it will be alright.

#mainBody {
  background-color: #F1F4F9;
  width: 100%;
  margin-bottom: 0;                    /* Do this... */
}