How to code a sticky footer using the html object, in HTML and CSS?

Question

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: be

Answer 1

Here is how I added a body border at the bottom:

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

content

The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.