jquery – 仅当页面为“短”时才将页脚放在底部

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

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

我试过这个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使用文档准备好和窗口调整大小以确保所有情况都应该满足,但不幸的是,这似乎在任何情况下都不起作用.

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

解决方法

你不需要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%;
}

请参阅此fiddle以了解其工作原理.

原文地址：https://www.jb51.cc/jquery/176850.html