0

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

我在stackoverflow和google上搜索了几个线程。

似乎有两种技术：

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

  2. 绝对定位

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

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

问候

4

2 回答 2

2

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

回到你的代码。将#content_wrapper 的属性“位置”设置为相对。否则，包含块将是初始包含块。初始包含块覆盖视口区域，因此，您的页脚的行为如您的问题中所述。

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

于 2012-05-22T15:10:20.627 回答
1

看看：http: //jsfiddle.net/sTW6t/1/

这是我不久前在使用具有相对位置的粘性页脚时所做的。让一些 jquery 来解决问题，瞧 ;-) 它的作用是计算高度，以便页脚知道他需要停留的位置，粘性。

$（函数（）{

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)

});

干杯!

于 2012-05-22T15:09:50.700 回答