高度100％不會一直擴展背景色

Question

我有一個內容包裝器，我將高度設置為100％，但是問題是背景顏色不能完全覆蓋所有內容。 我已經附上了圖片和我的代碼，非常感謝您的幫助！ 包裝后明顯的空白： http : //imgur.com/8h18AdH

HTML（無效的部分是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

請添加所有位於元素內的HTML和所有CSS。 現在無法解決！