只有页面"短"时才将页脚放在底部

Question

我有一个有几页的网站.每个页面都有不同的高度(显而易见,但我提到它).

我想要实现的是,如果页面内容低于浏览器视口,则页脚标记将获得固定位置并将与页面底部对齐.

我试过这个js:

$(function(){
if ($(document).height() > $("footer").offset().top+44) {
        $("footer").addClass('fixbottom');
    }
}
});

$(window).resize(function() {
    if ($(document).height() > $("footer").offset().top+44) {
        $("footer").addClass('fixbottom');
    }
});

那个css:

.fixbottom {
    width: 100%;
    position: fixed;
    bottom: 0;
}


footer {
height:44px;
    background: #7abde9;
    color: #ffffff;
    text-align: center;
}

我的jquery中的顶部+44是因为我的页脚标记是44高度iv'e使用文档准备好并且窗口调整大小以确保所有情况都应该满足,但不幸的是,这似乎在任何情况下都不起作用.

任何帮助都应该受到极大的关注

Answer 1

你不需要javascript.

有一种称为" stickyfooter "的方法,即使内容不多,也可以提供一种将页脚始终放在底部的方法.

这是一个简单的例子:

html, body {
    height:100%;
}

#wrapper {
    position: relative;
    min-height:100%;
}

#main {
    padding-bottom: 44px;
}

footer {
    height: 44px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

看到这个小提琴,看它是如何工作的.