Question

如何让页脚始终保持页面底部（没有粘性）？我的页脚位于屏幕的底部，但不在页面上。

以下是我的代码示例。

HTML

Cannot invoke 'append' with an argument list of type '([String])'

CSS

<!DOCTYPE html>
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
     <link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="body">Body</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

Answer 1

如果您试图让页脚出现在容器的底部，则需要在容器上使用position：relative，这样页脚就会相对于容器位于底部。

Answer 2

通过使用position：relative和bottom：0，您可以在页面末尾设置页脚

像这样修改你的样式表，你可以清楚地理解效果

.footer {
width:100%;
height:109px;
position:relative;
bottom:0;
left:0;
background-color: purple;
}
.body {               // I've added this 
    height: 1000px;  // For better understaing
}

滚动页面时，页脚末尾会显示此页脚

Answer 3

＆＃13;

document

＆＃13;

Answer 4

使用现代的flexbox：（https://caniuse.com/#search=flex）



    html, body, .container {
        height: 100%;
    }
    .container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .header, .footer {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    .body {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 auto;
        -moz-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    }

css页脚始终在页面底部

4 个答案: