如何制作粘性页脚

时间:2012-03-22 10:08:38

标签: html css

如何制作一个粘性页脚我试过谷歌找到了一些结果,但没有得到它究竟是如何工作所以在这里我已经做了一些粗略的模型来深入了解事情我有三个div #header #container #footer

因此,如果我将删除 #container 而不是页脚不应该去任何应该在其永久位置稳定的地方。

用简单的方法解释每个人都会轻易理解......

看到我的小提琴: - http://jsfiddle.net/dZDUR/5/

4 个答案:

答案 0 :(得分:4)

身高:100%提供给html, body& main container。当您将height:100%提交给.container时,它会向下推footer&在此之后,我们从与他的footer相同的顶部提供margin height。像这样:

 html,body{
   height:100%;
 }
.header {
background:red;
width:500px;
height:100px;
}

.container {
background:yellow;
width:500px;
height:100%;
}

.footer {
background:green;
width:500px;
height:100px;
    margin-top:-100px;
}

<强> HTML

<div class="container">
    <div class="header">
</div>
</div>

<div class="footer">
</div>

选中此http://jsfiddle.net/dZDUR/8/

答案 1 :(得分:1)

http://jsfiddle.net/dZDUR/6/为页脚提供position: fixed值,您可以按照自己的意愿定位。在这个例子中有top:200px;所以即使没有#container

它也会留在那里

答案 2 :(得分:1)

我认为这会对你有帮助。

http://jsfiddle.net/4VEqh/

即使您移除容器div,页脚也不会移动。

答案 3 :(得分:0)

您可以通过CSS使用绝对定位。我假设你的页脚和标题没有嵌套在容器中,因为删除容器会删除页脚。所以,假设你有这个结构:

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

页脚div必须绝对定位(将其从流程中取出),底部设置为0 - 例如:

body {
  position:relative;
}

.footer {
  position: absolute; /* or position:fixed for scrolling */
  bottom: 0;
}

您可能需要也可能不需要在身体上设置位置:相对(这是默认行为?)。

如果图片中有滚动,如QQping提及,请使用position:fixed而不是position:absolute(否则为相同代码)