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

问题描述

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

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

以下是两种情况的截图:

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

html {边框顶部:实心@black 10px;边框底部:实心@black 10px;背景: url('img/bg.png') 重复；}身体 {宽度:@8col；边距:0px 自动；填充:100px 48px 84px；背景:@white;颜色:RGB(60,60,60)；-webkit-text-size-adjust: 100%;/* 阻止 Mobile Safari 自动调整字体大小 */字体:13px/20px 'OftenRegular';-webkit-tap-highlight-color: @green;}

我已经尝试将 height: 100% 用于 body 和 html 对象，但它看起来是这样的:http://prikonline.be/prikactie/

如何将边框粘贴到页面底部?

解决方案

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

.footer {位置:绝对；底部:0；边框底部:实心@black 10px;宽度:100%；}

然后在 </body> 或 somehting

之前插入这个

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.

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:

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;
}

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

How should I stick the border to the bottom of the page?

解决方案

You could instead use a footer wrapper like this.

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

and just insert this right before </body> or somehting

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

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