如何使用html对象，在HTML和CSS中编写粘性页脚？ [英] How to code a sticky footer using the html object, in HTML and CSS?

问题描述

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

I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.

问题：因为样式应用于 body ，我将border-bottom和border-top应用于 html 对象，因此底部边框从不会粘在页面底部，就像在通常的粘性页脚情况下一样。

The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.

以下是两种情况的截图：

Here are the screenshots for the two cases:

这里是我用于html和body的（LESS）CSS：pastie.org/private / us5x1vhjnwzq6zsiycnu2g

Here's the (LESS) CSS I'm using for html and body: 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;
}

我尝试过使用 height：100％ / code>两者都用于 body 和 html 对象，但是它看起来像是活的： http://prikonline.be/prikactie/

I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/

如何

推荐答案

您可以改用这样的页脚封装。

You could instead use a footer wrapper like this.

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

并直接插入< / body> ; 或某些

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

这篇关于如何使用html对象，在HTML和CSS中编写粘性页脚？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！