将div放置在容器元素的底部

Question

我正在设计的网页布局像这样：http://jsfiddle.net/5sTub/

编辑：注意：我并不是想要一个黏糊糊的页脚。我只想把它放在页面底部。回答之前请先看小提琴

我试图定位在页面底部的页脚，但无法像你在上面的链接中看到的那样。我尝试了在互联网上找到的一切，包括设置容器元素的位置：相对；页脚的位置：绝对 和底部：0但事实上，如果将container div添加到代码中，并使其位置为：relative，那么似乎什么都不起作用，并将以下css添加到页脚：位置：绝对；底部：0 ，页脚似乎消失在某处。很长一段时间以来，这个问题一直困扰着我，到目前为止，我找到的唯一解决方案是设置页眉、内容和页脚的位置：static ，它破坏了整个布局，看起来非常丑陋。我想避免使用javascript。请帮忙，提前谢谢。

其中蓝色是页脚，深蓝色是页眉，浅蓝色是实际内容，粉红色是一个粘性的div。我不想让页脚变粘，但我希望它像一个你会在正常页面上找到的一样，唯一的问题是它会停留在页面的底部（见小提琴）




Answer 1

会有帮助http://jsfiddle.net/5sTub/1/

Answer 2

用这个

在你的css中添加这个css属性

html, body{height:100%}


div#footer {
        color: white;
        background: rgba(68, 68, 68, 0.8);
        width: 100%;
        position:absolute;
        bottom:0;
    }

Answer 3

您可以使用Sticky Footer方法进行此操作。读这个http://ryanfait.com/sticky-footer/

例如，这样写：

超文本标记语言

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

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

CSS

body,html{
 height:100%;
}
.container{
 min-height:100%;
}
.footer{
 height:40px;
 margin-top:-40px;
}

点击这里查看更多页面底部的刷新页脚，twitter引导