我不能让我的页脚粘

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>

这有什么问题？

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

这很好用：

 <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 个解决方案

解决方案1
2 已采纳 2014-02-05 20:45:46

解决方案2
0 2014-02-05 20:49:52

我不能让我的页脚粘

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-02-05 20:45:46

解决方案2 0 2014-02-05 20:49:52

解决方案1
2 已采纳 2014-02-05 20:45:46

解决方案2
0 2014-02-05 20:49:52