CSS：使边框停留在页面底部（不是窗口）

Question

我有一个简单的页面，我正试图在CSS的底部设置一个边框，如下所示：

body {
    height: 100%;
    border-bottom-color: #ad3127;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

如果我有足够的内容来填充整个窗口，这很有用，特别是当它需要滚动时：条形图出现在页面的底部（不是窗口。我不希望它浮动在内容或类似内容。）

问题是当没有足够的内容填满整个窗口时，条形图只会出现在内容结束的底部。这种情况很有意义，但显然不是我想要的。

我尝试过像

这样的东西

html {
    height: 100%;
}

这两种情况似乎都有效，除非我调整窗口大小时会受到损坏（至少在Firefox 4中），而在Mobile Safari中它会在我的视口底部呈现（即在我的内容中间） ）。所以这似乎并不适合我。

必须有办法解决这个问题（尽可能少的巫术，请：）。）

Answer 1

而不是height: 100%，请使用min-height: 100vh：

＆＃13;

＆＃13;

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

＆＃13;

<p>content</p>

＆＃13;

＆＃13;

＆＃13;

由于box-sizing: border-box，身体的边界将被计入身高。这里唯一的黑客是内容边距推动视口下方的边框，该视口以任意padding-top值固定。

Answer 2

Chris Coyier不久前做了一篇关于身体边界的有趣文章。以下是供参考的链接：http://css-tricks.com/558-body-border/

要做你想做的事，最交叉的浏览器方式是创建一个像边框一样的div，然后给它一个固定位置的底部0.这样的效果：

HTML: 
<div id="bottom"></div>

CSS:
#bottom {
    background: #ad3127;
    height: 5px;
    position: fixed;
    left: 0;
    bottom: 0;
}

一点点hacky方式，albiet与旧浏览器不兼容的是使用伪元素：

body:after {
    content: "";
    position: fixed;
    background: #ad3127;
    height: 5px;
    position: fixed;
    left: 0;
    bottom: 0;
}