[英]height 100% not extending the background color all the way
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. 我有一个内容包装器,我将高度设置为100%,但是问题是背景颜色不能完全覆盖所有内容。 I've attached images and my code, any help would be great thanks! 我已经附上了图片和我的代码,非常感谢您的帮助! The obvious white space after my wrapper: http://imgur.com/8h18AdH 包装后明显的空白: http : //imgur.com/8h18AdH
HTML (the part that does not work is the div outerColor
): 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: 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;
}
Please add all HTML that is positioned within the elements and all CSS. 请添加所有位于元素内的HTML和所有CSS。 Now it's impossible to solve! 现在无法解决!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.