html - 粘性页脚，但有一点变化

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 属性绝对定位到页面底部，这将使页脚向下滑动高度之和与窗口高度之差。