我似乎无法解决为什么页脚覆盖内容div的问题。我看到内容div没有扩展，但不确定原因。任何帮助将不胜感激！
这是更新的css :(我做了一些更改，使页脚成为粘性页脚）
* {
margin:0;
padding: 0;
}
html, body {
height:100%;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#wrap {
width:100%;
min-height:100%;
margin: 0 0 -159px 0;
background-color:#d9d9d9;
}
#toprow {
width: 100%;
height: 108px;
background-color:#000000;
}
#toprow-outer {
margin:0 auto;
width: 1024px;
}
#main {
margin:0 auto;
width: 1024px;
min-height:100%;
height:100%;
padding: 0 0 159px 0;
}
#content {
margin:0 auto;
/*width:898px;*/
width: 804px;
min-height:100%;
height:100%;
background-color:#FFFFFF;
padding-top: 37px;
padding-left: 47px;
padding-right: 47px;
padding-bottom: 47px;
}
#content p {
line-height:16px;
margin-bottom: 10px;
}
p.first {
padding-top: 5px;
margin-bottom: 15px;
line-height:16px;
}
.bottomSpacerRow {
height: 47px;
background-color: #DF2529;
clear:left;
}
h2{
font-family:Myriad Pro;
font-size:28px;
color:#000000;
margin-bottom:26px;
}
#masthead {
margin:0 auto;
width: 898px;
height: 108px;
}
#logo {
width: 331px;
height: 74px;
margin-top:17px;
margin-right:38px;
margin-bottom:17px;
float:left;
}
#masthead-spacerbot {
height: 15px;
}
h3 {
font:"Myriad Pro";
font-size:25px;
color:#FFFFFF;
font-weight:normal;
margin-top: 26px;
margin-bottom:26px;
}
#pic-nathan {
width: 155px;
height: 199px;
margin-right:20px;
margin-bottom:10px;
float:left;
}
h4 {
font:"Myriad Pro";
font-size:18px;
color:#FFFFFF;
margin-bottom:26px;
}
.text {
font:Myriad Pro;
font-size:14px;
color:#FFFFFF;
margin-right: 20px;
}
#textspacer {
height: 15px;
}
button {
width:59px;
height:27px;
line-height:27px;
background-color:#9e9d9e;
border:none;
color:#FFFFFF;
cursor:pointer;
margin-top:20px;
float:left;
}
.clear {
clear:both;
}
.clearfooter {
clear:both;
height: 47px;
}
.linebreak {
clear:left;
}
#footer {
position: relative;
min-height:132px;
padding-top:27px;
padding-bottom:20px;
width:100%;
clear:both;
background-color:#000;
color:#FFF;
}
a.footer {
color: #FFFFFF;
text-decoration:none;
}
a.footer:hover {
color: #FFFFFF;
text-decoration:underline;
}
#footercontent-outer {
margin: 0 auto;
width:1024px;
}
#footercontent {
margin: 0 auto;
width:898px;
background-color:#C1AA47;
font-family:Myriad Pro;
font-size:13px;
color: #FFFFFF;
}
#footer-linebreak {
clear:left;
height:7px;
}
#footercol {
width: 224px;
float:left;
/*background-color: #DCE81F;*/
}
#footercol-links {
width: 169px;
float:left;
padding-left: 55px;
}
#footercol-contact {
width: 224px;
float:left;
}
#footer UL
{
list-style-type: none;
width:224px;
}
#footercol-right {
width: 194px;
float:left;
padding-left: 30px;
}
#footerLogo {
width:148px;
height: 33px;
float:left;
margin-bottom:23px;
}
#footerinfo {
clear:left;
margin-left:21px;
font-size:12px;
}
h5 {
font-family:Myriad Pro;
font-size:18px;
color:#FFFFFF;
margin-bottom:17px;
float:left;
font-weight:normal;
}
#icon-footer{
width:35px;
height:24px;
float:left;
}
#icon-text {
float:left;
font-family:Myriad Pro;
font-size:14px;
line-height:24px;
}
这是更新的HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="locks, lock & key, locksmiths, locksmithing, charles town wv, key locksmith, auto locksmith, rekeying locks">
<title>UrgenKey - Services</title>
<link rel="stylesheet" href="css/main-sub-teststicky.css">
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="toprow">
<div id="toprow-outer">
<div id="masthead">
<div id="logo" title="UrgenKey Locksmith Service"><a href="index.html"><img src="images/Logo.jpg" width="331" height="74" alt=""/></a>
</div>
<div id="topnav">
<ul>
<li><a href="index.html" class="btnhome">HOME</a></li>
<li><a href="about.html" class="btnabout">ABOUT</a></li>
<li><a href="#" class="btnsvcsSel">SERVICES</a></li>
<li><a href="contact.html" class="btncontact">CONTACT</a></li>
</ul>
</div><!--end topnav-->
</div><!--end masthead-->
</div><!--end toprow outer-->
</div><!--end toprow -->
<div id="main">
<div id="content">
<h2>Services</h2>
<p class="first">UrgenKey Locksmith Service is owned and operated by Nathaniel Rhodes.
Nathaniel completed training throuogh Penn Foster and became certified in February of 2012.</p>
</div>
<!--end content-->
</div><!--end main-->
</div><!--end wrap-->
<div id="footer">
<div id="footercontent-outer">
<div id="footercontent">
<div id="footercol">
<div id="footerLogo"><a href="#"><img src="images/logo-footer.jpg" width="148" height="33" alt="UrgenKey Locksmith Service"/></a></div><!--end footerlogo-->
<div id="footerinfo">
© 2014 Urgenkey<br>
Limited Liability<br>
Licensed & Insured<br>
Bonded</div>
</div><!--end footercol1-->
<div id="footercol-links"><h5>LINKS</h5>
<div class="linebreak"></div>
<UL>
<li><a href="#" class="footer">Home</a></li>
<li><a href="#" class="footer">About</a></li>
<li><a href="#" class="footer">Services</a></li>
<li><a href="#" class="footer">Contact</a></li>
</UL>
</div><!--end footercol-links-->
<div id="footercol-contact"><h5>CONTACT</h5>
<div class="linebreak"></div>
<UL>
<li><a href="#" class="footer">Nathan@UrgenKey.com</a></li>
<li>540-664-0765</li>
</UL>
</div>
<div id="footercol-right"><h5>CONNECT</h5>
<div class="linebreak"></div>
<div id="icon-footer"><img src="images/icon-facebook.png" width="26" height="24" alt=""/></div>
<div id="icon-text"><a href="#" class="footer">FaceBook</a></div>
<div id="footer-linebreak"></div>
<div id="icon-footer"><img src="images/icon-twitter.png" width="26" height="25" alt=""/></div>
<div id="icon-text"><a href="#" class="footer">Twitter</a></div>
</div><!--end footercol-right-->
</div><!--end footercontent-->
</div><!--end footercontent-outer-->
</div><!--end footer-->
</body>
</html>
答案 0 :(得分：0)
因为你将换行 高度设置为100％ 。删除它。它只需要min-height。
看到这个小提琴：
全屏输出：http://jsfiddle.net/UjXFy/1/show/
#wrap {
min-height:100%;
background-color:#d9d9d9;
width: 100%;
}