Question

我有一个简单的任务：将页脚粘贴到底部（粘性页脚）。

我在stackoverflow和google上搜索了几个主题。

似乎有两种技巧：

http://ryanfait.com/sticky-footer/layout.css,http://www.cssstickyfooter.com/style.css （重置所有元素填充和边距，拉伸包装，清除两个或其他附加模块）
绝对定位

第一个看起来像一些黑客（也没有工作）所以我想坚持绝对定位（底部：0;）但在这里我提到页面内容很大（很多段落）页脚挂起在我向下滚动的中间...

然而，这是小提琴，希望有人发现我的错误： http://jsfiddle.net/379gr/

此致

Answer 1

这是 FooterStick ：http://jsfiddle.net/jAbw4/。

返回您的代码。将#content_wrapper的属性“position”设置为relative。否则，包含块将是初始包含块。初始包含块覆盖视口的区域，因此，您的页脚的行为与您的问题中描述的一样。

顺便说一下：Cameron Adams写了一个更强大的定位页脚的方法：FooterStickAlt。他更喜欢FooterStickAlt，因为旧版本的壁虎浏览器中的绘画错误和IE可以被观察到（当使用FooterStick时）：当页脚高度不正确时，页脚没有正确定位内容在加载过程中变化很大。因此，如果例如包括没有尺寸信息的图像，则绝对定位元素保持在第一次确定的位置，并且不随着增长的内容向下移动。 FooterStickAlt没有此问题。

Answer 2

检查出来：http://jsfiddle.net/sTW6t/1/

这是我刚才使用具有相对位置的粘性页脚时所做的。让一些jquery做的伎俩和瞧瞧;-)它的作用是计算高度，以便页脚知道他需要留在哪里，粘性。

$（function（）{

function positionFooter() {

    var windowHeight = $(window).height();
    var documentHeight = $('#pagewrap').height();

    if (windowHeight > ($('#content').height() + $('#header').height())) {
        var pagewrapHeight = windowHeight - $('#footer').height();
        $("#pagewrap").height(pagewrapHeight);
    }
}

positionFooter();
$(window).resize(positionFooter)

}）;

干杯！

Stick footer没有css教程可以享受乐趣

2 个答案: