Question

我似乎无法解决为什么页脚覆盖内容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>

Answer 1

因为你将换行 高度设置为100％ 。删除它。它只需要min-height。

看到这个小提琴：

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

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

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

页脚重叠内容div

1 个答案: