Question

所以，我已经知道如何制作粘性页脚，主要是使用这种方法：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

那就是说，我正在尝试一些不同的东西：

目前，我试图让我的所有网站内容都贴在页面底部，但是在页脚顶部，所以它看起来像：

标题

空格（随着更多内容的添加，此差距将关闭）

|

内容（贴在页脚顶部）

页脚（粘在页面底部）

随着更多内容的添加，内容会向上抬起，朝向标题，而页脚会粘到底部。很简单。

我想弄清楚的是，我怎样才能做到这一点，一旦内容填满足够到达页面顶部（并点击标题的底部），然后开始推开页脚在屏幕的底部。

至于代码，我真的不知道从哪里开始，虽然我想避免脚本并尽可能保持纯CSS。有什么想法吗？

Answer 1

我不知道用CSS单独完成此任务的方法，因为CSS不会比较媒体查询之外的变量，这不是媒体查询可以提供帮助的地方;但是，jQuery解决方案非常简单。每次内容更改时，只需运行这样的函数：

function addSomethingToContent(){

    var cHeight = parseInt($("#content").height());
    var hHeight = parseInt($("#header").height());
    var fHeight = parseInt($("#footer").height());
    var wHeight = parseInt($(window).height());

    if((cHeight + hHeight + fHeight) > wHeight)
    {
        $("#footer").css({
            "bottom": (wHeight - (cHeight + hHeight + fHeight)) + "px"
        });
    }
    else{
        $("#footer").css("bottom", "0px");
    }

}

假设您的页脚使用CSS中的bottom属性绝对位于页面底部，这将使页脚向下滑动高度和窗口高度之和的差值。

粘性页脚，但扭曲

1 个答案: