如何让页脚停留在网页的底部？

解决方案的灵感来自菲利普沃尔顿的粘性页脚.

说明

此解决方案仅适用于:

铬≥21.0

Firefox≥20.0

InternetExplorer≥10

Safari≥6.1

它基于flex显示,利用flex-grow属性,允许元素在高度或宽度(当设置为或分别设置)时增长,以占据容器中的额外空间.flow-directioncolumnrow

我们要充分利用也是vh单元,其中1vh被定义为:

视口高度的1/100

因此,100vh它的高度是一种简洁的方式,可以告诉元素跨越整个视口的高度.

这就是您构建网页的方式:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

为了让页脚粘到页面底部,您希望主体和页脚之间的空间增长到将页脚推到页面底部所需的数量.

因此我们的布局变为:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

履行

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

    
Hello World!
    

    

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

$( function () {

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

});

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

position: absolute;
bottom: 0;