title: How to code a sticky footer using the html object, in HTML and CSS?
body: <p>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.</p>
  
  <p>The problem: because of the styles applied to <em>body</em>, I'm applying the border-bottom and border-top to the <em>html</em> object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.</p>
  
  <p>Here are the screenshots for the two cases:</p>
  
  <p><img src="https://i.stack.imgur.com/Ujopi.png" alt="My Redesign"></p>
  
  <p><a href="https://i.stack.imgur.com/HQq2r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HQq2r.png" alt="Belgian client"></a>
  </p>
  
  <p>Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I've tried using <code>height: 100%</code> both for the <code>body</code> and <code>html</code> objects, but here's how it looks live: <a href="http://prikonline.be/prikactie/" rel="nofollow noreferrer">http://prikonline.be/prikactie/</a></p>
  
  <p>How should I stick the border to the bottom of the page?</p>