Question

我正在尝试创建修复位置元素功能，我试图强制我的页脚始终停留在页面的底部。由于html的结构方式，CSS属性position: absolute; bottom: 0;将无效。 click here for an example

修复不工作，红色背景将是ajax调用 - 红色块将没有固定高度也将放置在div包装器上，如果我使用固定位置你将注意到黑色元素将重叠红色块。我基本上需要黑色块总是坐在红色块下面

我知道有一个Javascript函数可以根据浏览器大小检测元素的位置。因此页脚会粘到底部根据我的例子，有人可以给我一个例子吗？

Answer 1

DEMO

您需要重新构建HTML。在所有内容周围粘贴一个容器div并在其中包含的部分中执行AJAX调用。然后，您将position: relative您的页脚与容器相关并使用红色背景设置容器样式。

编辑：如果这不是您要找的那样，请处理您的问题解释

Answer 2

这里有一些工作代码，不使用js，我只是添加了位置：固定到页脚和z-indizies到section和footer，所以页脚在“最高层”

http://jsfiddle.net/GmNSn/5/

    section{
    position: absolute;
    background: red;
    z-index: 555;
    height: 100%;
    margin: 30px;
    z-index:0;
}

#wrapper{
    height: 100px;
}

.box{
    width: 100px;
    height: 150px;
    background: #ccc;
    margin: 10px;
    display: inline-block;
    position: relative;
}

footer{
    background: #000;
    height: 200px;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index:1;
}

创建一个JavaScript粘性页脚

2 个答案: