CSS: Make a border stay at the bottom of the page (not window)

I've got a simple page, and I'm trying to set a border on the bottom of my page's body in CSS like so:

body {
    height: 100%;
    border-bottom-color: #ad3127;
    border-bottom-style: solid;
    border-bottom-width: 5px开发者_运维知识库;
}

This works great if I've got enough content to fill the whole window, especially when it needs to scroll: the bar appears at the bottom of the page (not the window. I don't want it to be floating over content or anything like that).

The problem is when there's not enough content to fill up the whole window, the bar just appears at the bottom of whereever the content ends. This sort of makes sense, but it's obviously not what I want.

I've tried something like

html {
    height: 100%;
}

Which seems to work in both cases, except when I resize my window it gets mangled (at least in Firefox 4) and in Mobile Safari it renders at the bottom of my viewport (ie kind of just in the middle of my content). So this does not appear to be doing it for me.

There must be a way to solve this (with as little sorcery as possible, please :)).

Instead of height: 100%, use min-height: 100vh:

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

<p>content</p>

Because of box-sizing: border-box, border of the body will be accounted in the body height. The only hack here is for content margins pushing the border below viewport, which is fixed with an arbitrary padding-top value.

Chris Coyier did an interesting article on body borders a while back. Here is the link for reference: http://css-tricks.com/558-body-border/

To do what you want, the most cross browser way would be to create a div that acts like a border, and then give it a fixed position of bottom 0. Something to this effect:

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

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

A little bit less hacky way, albiet less compatible with older browsers is to use pseudo elements:

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