如何在 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;
}

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

我应该如何将边框粘贴到页面底部？

Answer 1

这是我在底部添加正文边框的方法：

body {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  border-bottom: solid 5px #ad3127;
  padding-top: 1px;
}

<p>content</p>

关键是min-height: 100vh，它确保body高度至少是视口的高度。因为box-sizing: border-box，所以body的边框会计入body的高度。仍然存在内容边距将边框推到视口下方的问题，但可以使用任意 padding-top 值来修复。

Answer 2

您始终可以实现这个有效的粘性页脚 CSS（我已经添加了内联社交栏）：

.sticky-bar {
    background: #000000;
    bottom: 0;
    color: #D3D3D3;
    font-weight: 300;
    left: 0;
    margin: 0;
    opacity: 0.9;
    padding: 0em;
    position: fixed;
    width: 100%;
    z-index:99999;}

.sticky-bar-inner {
    margin:0 auto;
    text-align: center;
    width:100%;
    background-color: #D3D3D3;
    padding: 3px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #000000;
}

.sticky-bar-inner p {
    margin:0 auto;
    padding: 3px;
    text-align: center;
    width:100%;
    font-size: 11px;

}

#footerlist {
    padding-left:0;
}

#footerlist li {
    display: inline;
    list-style-type: none;
}

HTML：

<!-- Footer -->
<div class="sticky-bar">
    <div class="sticky-bar-inner">
        <p>&#169;2015 The astrobox.io Project<p>
        <ul id="footerlist">
            <li class="social"><a href="https://twitter.com/"><img src="#" height="42" width="42"></img></a></li>
            <li class="social"><a href="https://github.com/"><img src="#" height="42" width="42"></img></a></li>
            <li class="social"><a href="https://vimeo.com"><img src="#" height="42" width="42"></img></a></li>
        </ul>
    </div>
</div>

只需将 hrefs 编辑为您自己的个人网址，并将图像 src 编辑为您想要的社交风格图像（或包含 font awesome 包，如果你有的话）。

Answer 3

我不建议您将 CSS 应用于 html 元素。而是创建具有相似样式的 div。 在一般情况下，您的代码应该是这样的：

HTML

<div id="wrapper">
  <!-- main content goes here -->

  <div class="reserveSpace"></div>
</div><!-- #wrapper end -->

<div id="footer"></div>

CSS

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }

这适用于所有浏览器，甚至在 IE6 中：)

Answer 4

看起来您正在使用某种动态样式表工具（如 LESS）。通常动态样式表工具允许您使用 JavaScript。所以你可以将高度定义为：

@height: `window.innerHeight + 'px'`;

然后添加类似的东西

body{
  ...
  min-height: @height;
}

当然，这样做的问题是，如果用户调整他/她的浏览器窗口的大小，布局将无法正确更新。您可以使用window.onresize 回调来处理。

当然，您可以使用 JavaScript 来处理整个事情。诚然，有些人强烈反对使用 JavaScript 进行样式设置（行为、内容和样式的分离），当尝试像粘性页脚这样的事情时，有时只写两行 JavaScript 比尝试想出一些聪明的东西更容易在您尝试定位的每个浏览器中可能会或可能不会工作的 CSS。如果用户关闭了 JavaScript，那么页面就不会在内容较少的页面上填满页面的整个高度。

window.onload = window.onresize = function(){ 
    document.body.style.minHeight = (window.innerHeight-204) + "px";
    // -4px for the border
    // -200px for the padding on your body element
}

Answer 5

嗯...将min-height: 100% 放在页面上的html 元素上（在Web Inspector 中操作）在Chrome 中对我有用；你在测试什么？

但是，由于边框的高度，这种方法确实会超过 100%，您可以在 IE8+/Gecko/WebKit 中使用 CSS box-sizing 属性（使用值border-box)。

对于 IE7 和 IE6，如果您想让它们呈现相同的效果，编写一个小 JavaScript 会很容易，在加载或调整大小时，检查窗口高度，与文档高度进行比较，并在必要时强制 HTML 元素的窗口高度减去 20。

Answer 6

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

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

只需在 </body> 或其他内容之前插入此内容

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

Answer 7

尝试将其更改为：

height:auto;

用于您的 HTML CSS。

Answer 8

您可以使用position:fixed; 和bottom:0px; 来始终，无论您的滚动状态和内容高度如何，都将其固定到底部。