-1

我想创建粘性页脚，下面是我正在使用的 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;
}
4

2 回答 2

0

习惯了这个代码的粘性页脚

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>

现场演示

于 2013-04-16T09:56:20.530 回答
0

要将页脚粘贴在底部并与您应该使用的其他元素重叠

#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;
}
于 2013-04-16T10:16:18.113 回答