html - 如何在 HTML 和 CSS 中使用 html 对象编写粘性页脚？

Question

我正在为我正在设计的两个网站使用 Less Framework 4。在这两种设计中，我都想在文档的顶部和底部应用 5 像素的边框。

问题:由于应用于 body 的样式，我将 border-bottom 和 border-top 应用于 html 对象，所以底部边框永远不会粘在页面底部，就像在通常的粘性页脚情况下一样。

两种情况的截图如下:

这是我用于 html 和 body 的(LESS)CSS:pastie.org/private/us5x1vhjnwzq6zsiycnu2g

html {
    border-top: solid @black 10px;
    border-bottom: solid @black 10px;
    background: url('img/bg.png') repeat;
}

body {
    width: @8col;
    margin: 0px auto;
    padding: 100px 48px 84px;
    background: @white;
    color: rgb(60,60,60);
    -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
    font: 13px/20px 'OftenRegular';
    -webkit-tap-highlight-color: @green;
}

我已经尝试对 body 和 html 对象使用 height: 100%，但实际情况如下:http://prikonline.be/prikactie/

如何将边框固定在页面底部？

Answer 1

您可以改为使用这样的页脚包装器。

.footer {
  position: absolute;
  bottom: 0;
  border-bottom: solid @black 10px;
  width: 100%;
}

然后将其插入到 </body> 之前或某事

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