html - 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 中它呈现在我的视口(viewport)底部(即有点在我的内容的中间).所以这似乎不适合我。

必须有办法解决这个问题(请尽可能少用魔法:))。

Answer 1

代替 height: 100%，使用 min-height: 100vh:

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

<p>content</p>

由于 box-sizing: border-box，body 的边框将被计入 body 高度。这里唯一的 hack 是内容边距将边界推到视口(viewport)下方，这是用任意 padding-top 值固定的。