一个老线程我知道，但如果你正在寻找一个响应式的解决方案，这个jQuery添加将有助于:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

完整的指南可以在这里找到:https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

如果你正在寻找一个在页面底部对齐的响应性页脚，它总是保持视口高度的80%的上距，那么这个方法应该是有用的。

很多人把这个简单问题的答案放在这里，但我有一件事要补充，考虑到我是多么沮丧，直到我弄清楚我做错了什么。

如前所述，最直接的方法是这样做。

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

然而，post中没有提到的属性是body标签上的position: static，大概是因为它通常是默认的。相对位置无效!

我的wordpress主题覆盖了默认的主体显示，这让我困惑了很长一段时间。

一个老线程我知道，但如果你正在寻找一个响应式的解决方案，这个jQuery添加将有助于:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

完整的指南可以在这里找到:https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

下面是一个使用jQuery的解决方案，它就像一个魅力。它检查窗口的高度是否大于主体的高度。如果是，则更改页脚的边距顶部以进行补偿。在Firefox, Chrome, Safari和Opera中测试。

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

如果你的页脚已经有一个边距顶部(50像素，例如)，你将需要改变最后一部分:

css( 'margin-top', height_diff + 50 )

我发明了一个非常简单的解决方法，对我来说非常有用。您只需在div中包装除页脚之外的所有页面内容，然后将min-height设置为视点减去页脚高度的100%。不需要在页脚或多个包装器div上进行绝对定位。

.page-body {min-height: calc(100vh - 400px);} /*将400px替换为页脚高度*/