Databases
StackOverflow2013
Postsdbo
POHow to code a sticky footer using the html object, in HTML and CSS?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to code a sticky footer using the html object, in HTML and CSS?
    text
    copied!<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: <a href="http://cl.ly/7Kji" rel="nofollow noreferrer" title="My redesign"><img src="https://i.stack.imgur.com/Ujopi.png" alt="My Redesign"></a></p> <p><a href="http://cl.ly/7LJ5" rel="nofollow noreferrer" title="Belgian client">Belgian client http://f.cl.ly/items/2X2B0R2f053N0h1T1j3Q/prikonline.png</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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload