页脚重叠内容div

我似乎无法解决为什么页脚覆盖内容div的问题。我看到内容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">[email protected]</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>

来源

2014-01-05 user3162058

它，因为你设置的包高度至100％。删除。只需要min-height。

看到这个小提琴：

http://jsfiddle.net/UjXFy/1/

全屏输出：http://jsfiddle.net/UjXFy/1/show/

#wrap { 
    min-height:100%; 
    background-color:#d9d9d9; 
    width: 100%; 
}

来源

2014-01-05 08:00:59 Zword

谢谢你，这个工作。但是现在，当我只有几行文本时，content div不会扩展到页脚。我试图添加可见的内容div溢出，但它没有奏效。 – user3162058

你可以在上面的小提琴中进行编辑并发表评论吗？我会看到并解决你的问题。 – Zword

我已经做了编辑。在进行您建议的编辑之后，这里是css和html。问题是内容div不会将浏览器高度填充到100％。 – user3162058

页脚重叠内容div

回答

相关问题