html - height 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。现在无法解决!