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

Question

我有一个简单的 2 列布局，带有一个页脚，可以清除标记中的左右 div。我的问题是我无法让页脚在所有浏览器中都位于页面底部。如果内容将页脚向下推，它会起作用，但情况并非总是如此。

Answer 1

要获得粘性页脚:

1. 有一个 <div>与 class="wrapper"为您的内容。

2. 收盘之前 </div>的 wrapper放置 <div class="push"></div> .

3. 收盘后之后 </div>的 wrapper放置 <div class="footer"></div> .

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

<div class="wrapper">wrapper
    <div class="push">push</div>
</div>
<div class="footer">footer</div>