css for sticky footer not coming at proper position

Question

我想創建粘性頁腳，下面是我正在使用的css代碼，但是頁腳不會進入正確的位置，要麼到達頁面左側，要麼重疊其他div元素是哪裏出了錯誤

HTML代碼

<div id="wrap"> 
     <div id="header"> 
      <div id="logo"></div> 
      <div id="nav"></div> 
     </div> 
     <div id="mid"> 
      <div id="clogin"></div> 
      <div id="roll"></div> 
     </div> 
     <div id="main"> 
      <div id="advt"></div> 
      <div id="content"></div> 
      <div id="right"></div> 
     </div> 
<div id="footer"></div> 
    </div> 

CSS代碼

html, body { height: 100%; } 
html,body{ 
font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, arial, Sans-Serif; 
margin: 0; 
padding: 0; 
background-color: #ffffff; 
color: #000000; 
} 
body{ overflow-x: hidden;} 
/* Headers */ 
h1, h2, h3, h4 { 
font: bold 1em/1.5em Georgia, 'Times New Roman', Times, serif; 
color: #555; 
margin: 10px 20px 7px 20px; 
} 
h1 { font-size: 3.7em; font-weight: normal; letter-spacing: -2px; } 
h2 { font-size: 2.8em; font-weight: normal; } 
h3 { font-size: 2.2em; font-weight: normal; letter-spacing: -0.5px; padding-top: 15px; } 
h4 { font-size: 1.4em; } 

/* start - table */ 
table { 
border-collapse: collapse; 
margin: 10px 10px; 
} 
tr.altrow { background: #F9F9F9; } 
th, td { 
text-align: left;   
border-width: 1px; 
border-style: solid; 
} 
th { 
color: #555; 
background: #F0FBFF; 
padding: .8em 1em; 
border-color: #D8EBF5 #D8EBF5 #B9DBEE #D8EBF5; 
} 
td { 
border-color: #EFEFEF; 
padding: .7em 1em; 
} 
/* end - table */ 
/*form elements */ 
form{ 
margin: 0px 0px; 
padding: 0px 0px; 
} 

form table{ 
margin: 5px 10px; 
padding:0px; 
border: 1px solid #F0F0F0; 
border-collapse: collapse; 
} 
form p { 
border-bottom: 1px solid #E6E6E6; 
padding: 12px 0 5px 0; margin: 0; 
color: #666666; 
} 
form div{ 
margin: 5px 10px; 
} 
p { 
font-size: 12 px; 
} 

/* ------------------------------------------ 
LAYOUT 
------------------------------------------- */ 
#wrap{ 

width: 1000px; 
margin: 0 auto; 
text-align: left; 
/*height: 100%;*/ 
/*height: 1000px;*/ 
min-height: 100%; 

} 

/* header */ 
#header{ 
position: relative; 
width: inherit; 
height: 117px; 
} 
#logo{ 
width: 287px; 
height: 117px; 
float: left;     
} 
#logo h1 { 
margin: 0; padding: 15px 0px; 
font: bold 52px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-Serif; 
letter-spacing: -5px; 
color: #ff3646; 
} 
#logo p#slogan { 
position: absolute; 
font-family: Georgia, 'Times New Roman', Times, serif; 
font-weight: bold; 
font-size: 13px; 
line-height: 1.8em; 
font-style: italic; 
letter-spacing: -.3px; 
color: #CFCFCF; 

/* change the values of top and left to adjust the position */ 
top: 62px; left: 7px;  
} 
input.button { 
width: auto;height: 26px; 
color: #ffffff; font: bold; 
background: url(../images/Candidate--Login---button.jpg); 
border: none; 
padding: 5px; 
} 
.button:hover{ 
border: inset; 
} 
input.sbutton { 
width: 55px;height: 20px; 
color: #000000; font: bold; 
background: url(../images/Search.jpg); 
border: none; 
} 
.sbutton:hover{color: #ffffff;} 

/* Navigation */ 
#nav{ 
float: right; 
width: 708px; 
height: 117px; 
background: #ffffff url(../images/Main-Header.jpg); 
margin: 0px;padding: 0 px; 
} 
#nav .rclick{ 
position: relative; 
left: 500px;top: 40px; 
background: url(../images/Employer.jpg) no-repeat; 
color: #FFFFFF; 
font-size: 1.14em; 
} 
#nav .rclick a:link,a:visited{text-decoration: blink;} 
#nav .rclick a:hover,a:link:active{ text-decoration: underline;} 
#menu{ 
position: absolute;top: 80px; 
width: auto; 
height: auto; 
} 
#nav1, .nav1, #nav1 .nav1 li { margin:0px; padding:0px; } 
#nav1 li {float:left; display:inline; cursor:pointer; list-style:none; padding: 5px 15px 10px 15px; text-transform: uppercase; font: bold 14px 'Trebuchet MS', Arial, Sans-Serif; position:relative;} 
#nav1 li ul.first {left:-1px; top:100%;} 

li, li a {color:#66FFFF; text-decoration:none;} 
#nav1 .nav1 li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; 
border-left:none; border-right:none; background:#70B8FF;} 
#nav li a {display:block; width:inherit; height:inherit;} 

ul.nav1 { display:none; } 
#nav li:hover > a, #nav1 li:hover { color:#0047B2; background:#52F3FF; } 
li:hover > .nav1 { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; } 
li:hover { position:relative; z-index:2000; } 

#container{ 
position: absolute; 
top: 117px; 
width: 998px; 
height: auto; 
border: solid #E6E6E6 1px; 
margin: 5px;} 
/*middle*/ 
#mid{ 
position: absolute; 
top: 117px; 
width: inherit; 
height: 246px; 
} 
#clogin{ 
margin-top: 5px; 
margin-right: 5px; 
width: 287px; 
height: 246px; 
background-image: url(../images/Candidate--Login.jpg); 
background-repeat: no-repeat; 
} 
#clogin h3{ 
margin: 0px;padding: 5px 0 0 0; 
font: 22px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-Serif; color: #FFFFFF; text-align: center; 

} 
#clogin .logn table,tr{ 
/*border: hidden;*/ 
margin: 5px auto; 
background: none; 
} 
.logn td{border: 0;} 
.logn a:link,a:visited{ 
color: #ffffff;text-decoration: none; 
} 
.logn a:hover{color: red;} 
#roll{ 
margin-top: 5px; 
position: absolute;top: 0px; 
left: 293px; 
width: 707px; 
height: 241px; 
background-image: url(../images/main-Branding.jpg); 
float: right; 
} 
#main{ 
position: absolute; 
top: 368px; 
width: inherit; 
height: 450px; 
} 

/* advertisement */ 
#advt{ 
width: 292px; 
height: auto; 
margin: 0px; 
} 
#advt .img-block{ 
float: left; 
width: 265px; 
margin: 10px 0 0 25px; 
padding: 10px 0 0 0; 
display: inline; 
    } 
#advt .imag-block img{ 
background: #FFF; 
border: 1px solid #DFEAF0; 
padding: 5px; 
} 
#advt label.adlabel{ 

float: left; color: #66FFFF; 
font-size: 1.6em; font: bold; margin: 25px 20px 0 60px;padding: 0px 5px; 

} 

#content{ 
position: absolute; 
left: 292px;top: 0px; 
width: 561px; 
height: auto; 

} 
#content .searchbag{ 
width: 551px; 
margin: 2px 30px 5px 0px; 
padding: 5px 0 10px 10px; 
background: url(../images/Search-Assignment.jpg) no-repeat; 

} 
#content .searchbag input{ 
margin: 0px 5px 2px 10px; 
} 
#content label.slabel{ 
color: #66FFFF; 
font: bold; font-size: 1.15em; 
margin: 5px 120px 0 20px;} 
#content p{margin: 10px 10px;} 
#right{ 
position: absolute; 
top: 16px;right: 0px; 
width: 146px; 
height: 400px; 
} 
#right .box1{background-image: url(../images/advt-box-1.jpg); background-repeat: no-repeat; height: 94px; position: relative; left: 10px; top: 5px;} 
#right .box2{background-image: url(../images/advt-box-2.jpg); background-repeat: no-repeat; height: 94px;position: relative; left: 10px; top: 5px;} 
#right .box3{background-image: url(../images/advt-box-3.jpg); background-repeat: no-repeat; height: 94px;position: relative; left: 10px; top: 5px;} 
#right label.showno{font-size: 1.5em; color: #006B00; position: relative; top: 20px; left: 5px;} 
#right div.show{font-size: 3.7em;color: #006B00; padding: 5px; position: relative; top: 10px; left: 20px;} 
.clear {clear: both;} 
#footer{    
position: relative; 
bottom:0; 
width:inherit; 
height:30px; /* Height of the footer */ 
background:#6cf; 
} 

Answer 1

用於此代碼爲粘頁腳

的CSS

html, body { 
height: 100%; 
} 
.wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; background:red; 
margin: 0 auto -4em; 
} 
.footer, .push { 
height: 4em; 
} 

.footer{ 
    background:green;} 

HTML

<div class="wrapper"> 
    <p>Your website content here.</p> 
    <div class="push"></div> 
</div> 
<div class="footer"> 
    <p>Copyright (c) 2008</p> 
</div> 

Live Demo

Answer 2

要堅持在底部的頁腳和重疊的其他元素，你應該使用

#footer{    
    position: fixed; // To stay fixed 
    bottom:0; 
    left: 0; // To stick to the left 
    z-index: 99; // For overlapping elements 
    width:inherit; 
    height:30px; /* Height of the footer */ 
    background:red; 
}