我的页脚不会停留在底部

Question

footer {
    text-align: center;
    background-color: #fff;
    line-height: 72px;
    margin: 0; 
    position: relative;
    max-width: 100%;
    height: 60px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;

}


footer, .push {
    height: 60px; /* '.push' must be the same height as 'footer' */
    max-width:100%;
}

/** Sticky Footer by Ryan Fait -http://ryanfait.com/ */

.cf:before
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/*http://nicolasgallagher.com/micro-clearfix-hack/ */

HTML

<div class="cf"></div>

<div class="push"></div>
</main>
<footer><div>
<ul>
<li>NAME</li>
<li>DESIGN</li>
<li>Portoflio </li>
</ul>
</div>
</footer>

</body>
</html>

我该怎么办？

Answer 1

CSS中的

：

footer {
    text-align: center;
    background-color: #fff;
    line-height: 72px;
    margin: 0; 
    position: fixed; <---
    max-width: 100%;
    height: 60px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    bottom:0; <---
}

Answer 2

您需要将整个内容包装在包装元素中的页脚之前。您正在阅读的示例是propably this one.在页脚上使用固定元素是我不建议的。