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

It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:

@height: `window.innerHeight + 'px'`;

And then add something like

body{
  ...
  min-height: @height;
}

Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.

Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.

window.onload = window.onresize = function(){ 
    document.body.style.minHeight = (window.innerHeight-204) + "px";
    // -4px for the border
    // -200px for the padding on your body element
}