height 100% not extending the background color all the way

Question

I have a content wrapper that I set height 100% but the problem is the background color does not fully extend across all of content. I've attached images and my code, any help would be great thanks! The obvious white space after my wrapper: http://imgur.com/8h18AdH

HTML (the part that does not work is the div outerColor ):

<p id="dimensions"></p>
<div id="windpageTitle">

    <div class="headerContent">

        <nav>

            <ul class="navDown"> 
                <li><a href="../index.html">Home</a></li>   
                <li><a href="#windSubtitleSavings">Save</a></li>  
                <li><a href="#windSubtitleLocation">Locations</a></li>  
                <li><a href="#windSubtitleStart">Activate</a></li>     
            </ul>

            <a href="#" class="subMenuIcon"><p class="menu"></p></a>

        </nav>

        <h1 class="pageTitleText">Wind.</h1>

        <div class="pageNav">

            <ul class="navLink">

                <li><a href="../index.html">Home</a></li>
                <li><a href="#savingsSub">Savings</a></li>
                <li><a href="#locationSub">Location</a></li>
                <li><a href="#SubtitleStart">Start</a></li>

            </ul>

        </div>

    </div>

</div>

<div id="outerColor">

    <div class="innerContent">

        <div id="savingsSub">

            <p class="graph"><img src="../images/graph.png" width="500px" height="500px" /></p>
            <p class="savingsText">Text here</p>

       </div>

       <div id="locationSub">

            <p class="map"><img src="../images/mapWind.png" width="500px" height="257px" /></p>
            <p class="locationText">TEXT HERE</p>

        </div>



    </div>

</div>

CSS:

#windpageTitle {
    background-color: #fff;
    width:100%;
    height:170px;
}

#outerColor {
    background-color:#666;
    width:100%;
    height:100%;
}

.innerContent {
    position:relative;
    width:90%;
    margin:auto;
    text-align:center;
}

#savingsSub {
    position:relative;
    display:table;
    padding-top:40px;
    width:1300px;
    float: left;
}

.savingsText {
    display: table-cell;
    vertical-align: middle;
    float:right;
    padding-right:30px;
    padding-top:125px;
    width:700px;
    font-family: 'Oxygen', sans-serif;
    font-size:18px;
    color:#fff;
    line-height:25px;

}

#locationSub {
    position:relative;
    display:table;
    padding-top:55px;
    width:1600px;
    float: right;
}

.locationText {
    display: table-cell;
    vertical-align: middle;
    float:left;
    width:700px;
    padding-left:350px;
    padding-top:55px;
    font-family: 'Oxygen', sans-serif;
    font-size:18px;
    color:#fff;
    line-height:25px;
}

.graph {
    float:left;
    width:500px;
    height:500px;
}

.map {
    float:right;
}

Answer 1

Please add all HTML that is positioned within the elements and all CSS. Now it's impossible to solve!