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
}

Answer 2

You can always implement this working sticky-footer CSS (I've added with inline social bar):

.sticky-bar {
    background: #000000;
    bottom: 0;
    color: #D3D3D3;
    font-weight: 300;
    left: 0;
    margin: 0;
    opacity: 0.9;
    padding: 0em;
    position: fixed;
    width: 100%;
    z-index:99999;}

.sticky-bar-inner {
    margin:0 auto;
    text-align: center;
    width:100%;
    background-color: #D3D3D3;
    padding: 3px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #000000;
}

.sticky-bar-inner p {
    margin:0 auto;
    padding: 3px;
    text-align: center;
    width:100%;
    font-size: 11px;

}

#footerlist {
    padding-left:0;
}

#footerlist li {
    display: inline;
    list-style-type: none;
}

HTML:

<!-- Footer -->
<div class="sticky-bar">
    <div class="sticky-bar-inner">
        <p>&#169;2015 The astrobox.io Project<p>
        <ul id="footerlist">
            <li class="social"><a href="https://twitter.com/"><img src="#" height="42" width="42"></img></a></li>
            <li class="social"><a href="https://github.com/"><img src="#" height="42" width="42"></img></a></li>
            <li class="social"><a href="https://vimeo.com"><img src="#" height="42" width="42"></img></a></li>
        </ul>
    </div>
</div>

Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).

Answer 3

I do not advise you to apply CSS to html element. Instead create div with similar styles. In general case your code sould be like this:

HTML

<div id="wrapper">
  <!-- main content goes here -->

  <div class="reserveSpace"></div>
</div><!-- #wrapper end -->

<div id="footer"></div>

CSS

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }

This works perfect in all browsers, even in IE6 :)

Answer 4

Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?

This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).

For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.

Answer 5

You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.

Answer 6

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;
}

<p>content</p>

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.