在页面底部设置页脚[重复]答案

【问题标题】：set the footer at page bottom [duplicate]在页面底部设置页脚[重复]
【发布时间】：2015-12-31 03:25:04
【问题描述】：

这是一个测试代码，但我需要在页面的真正底部设置页脚

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
                <?php
                    for($i=0;$i<100;$i++){
                        echo $i."<br>";
                    }
                ?>
        </div>
        <footer>
            Footer<br>
        </footer>
    </body>
<html>

和css文件

html, body {
    height: 100%;
    background-color: grey;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -20%;
    padding-bottom: -20%;
    background-color: green;
}
footer {
    background-color: blue;
    min-height: 20%;
    position: absolute;
    bottom: 0;
    width: 100%;
}

这样将页脚设置在页面底部，但是如果您继续滚动页面，我需要将页脚设置在真正的末尾，当您无法再滚动时，必须放置页脚。

【问题讨论】：

标签： html css

【解决方案1】：

像这样......这在所有内容之后设置它，这就是我认为你的意思

footer {
    background-color: blue;
    min-height: 20%;
    position: relative;
    width: 100%;
}

Have a look at this fiddle

【讨论】：

【解决方案2】：

尝试分配给页脚元素：

footer{
position: fixed;
bottom: 0;
}

【讨论】：

【解决方案3】：

你应该去掉body的边距和内边距，有一个默认的边距和内边距，你可以去掉这个。

jsfiddle-link

html, body {
  height: 100%;
  background-color: grey;
  padding:0;
  margin:0;
}

【讨论】：