Question

我正试图为我的网站制作一个粘性页脚。我尝试了http://www.cssstickyfooter.com/的方法和其他一些方法，没有任何作用。这是我在cssstickyfooter.com上的代码。

<!DOCTYPE html>
<html lang="en-US">
<head>
<!--[if !IE 7]>
<style type="text/css">
    #wrap {display:table;height:100%}
</style>
<![endif]-->

<style type="text/css">
* {margin:0;padding:0;} 

html {height: 100%;}

body {
height: 100%;
color: #131212;
background-color: #e6e6e6;
}

#wrap {min-height: 100%;}

#main {overflow:auto;
padding-bottom: 26px;}  

#footer {position: relative;
margin-top: -26px; 
height: 26px;
clear:both;
background-color: #b0b0b0} 

body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

h1 {
font-size: 350%
}
h6 {
font-size: 40%
}

a:link {
color: #5e5e5e;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #5e5e5e;
}

a:hover {
text-decoration: underline;
color: #5e5e5e;
}
</style>
</head>
<body>
<div id="wrap">
<center>
        <div id="header">
        <h1>my header here</h1>
        </div>
        <br />
        <div id="main">
            <h2>my content here</h2>
        </div>
    <div id="footer">
        <h3>my footer here</h3>
    </div>
</center>
</div>
</body>
</html>

这有什么问题？

编辑 - 这是一个jsfiddle http://jsfiddle.net/2WwZf/

这很好用：

 <div id="wrap">
 <center>
    <div id="header">
    <h1>my header here</h1>
    </div>
    <br />
    <div id="main">
        <h2>my content here</h2>
    </div>
 </center>
 </div>
 <div id="footer">
 <h3>my footer here</h3>
 </div>

但是当我这样做时，它仍然失败。

 <center>
 <div id="wrap">
    <div id="header">
    <h1>my header here</h1>
    </div>
    <br />
    <div id="main">
        <h2>my content here</h2>
    </div>
 </div>
 <div id="footer">
 <h3>my footer here</h3>
 </div>
 </center>

Answer 1

您的footer div必须在wrap div之外，如下所示：

<div id="wrap">
    <div id="header">
    <h1>my header here</h1>
    </div>
    <br />
    <div id="main">
        <h2>my content here</h2>
    </div>
</div>
<div id="footer">
    <h3>my footer here</h3>
</div>

您还可以移除<center>代码，只需将text-align:center样式应用于您想要居中的元素。

#wrap {
       min-height: 100%;
       text-align:center;
      }

#footer {
         position: relative;
         margin-top: -26px; 
         height: 26px;
         clear:both;
         background-color: #b0b0b0;
         text-align:center;
        }

Answer 2

您的页脚的父元素需要具有完整高度（窗口或内容，具体取决于哪个更大）。此外，它需要明确定位（relative在您的情况下），以确定您的绝对定位的页脚相对于它。

以下是一个工作示例，基于您的代码：http://jsfiddle.net/z3C3F/2/

重要的CSS行：

center {
    min-height: 100%;
    overflow: hidden;
    position: relative;
}
#footer {
    position: absolute;
    bottom: 0;
}

我不能让我的页脚粘

2 个答案: