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

Question

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

原文由 Bill the Lizard 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 */
}

原文由 Staale 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 CSS vh 单位！

处理粘性页脚的最明显和最简单的方法可能是使用新的 css viewport units 。

以下面的简单标记为例：

 <header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

如果页眉高度为 80px，页脚高度为 40px，那么我们可以在内容 div 上 使用一条规则 制作粘性页脚：

 .content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

这意味着：让内容 div 的高度 至少 为视口高度的 100% 减去页眉和页脚的组合高度。

而已。

 * {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

 <header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

… 下面是相同代码如何处理内容 div 中的大量内容：

 * {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

 <header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

注意：

1）必须知道页眉和页脚的高度

1. 旧版本IE（IE8-）和Android（4.4-）不支持视口单位。 （ 犬）

2. 曾几何时，webkit 在计算规则中的视口单位方面存在问题。这确实已得到修复（ 请参见此处），因此没有问题。但是，如果您出于某种原因希望避免使用 calc ，则可以使用负边距和填充框大小来解决这个问题 -

像这样：

 * {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

 <header>header goes here</header>
<div class="content">Lorem ipsum
</div>
<footer>
    This is my footer
</footer>

原文由 Danield 发布，翻译遵循 CC BY-SA 3.0 许可协议