Sticky footer on bottom without overlapping

Question

I am trying to get the footer to stick to the bottom of the page. If the content is small, the footer should be on the bottom of the browser. The space between content and footer should be empty.

I have tried various methods, but the footer remains directly under the content, and not at the bottom of the browser.

Here is my code

<div id="content">        
    <a href="item.html">
        <div class="col-xs-12 col-md-6 col-lg-3 item">
            <div class="opacity"></div>
            <div class="box_bg">
                <h4 class="color1">Headline</h4>
                <p>Description</p>                    
            </div>
        </div>
    </a>
    <a href="item.html">
        <div class="col-xs-12 col-md-6 col-lg-3 item">
            <div class="opacity"></div>
            <div class="box_bg">
                <h4 class="color1">Headline</h4>
                <p>Description</p> 
            </div>
        </div>
    </a>
</div>
<footer class="bar bar-tab">        
    <a class="tab-item" href="#">
        Home
    </a>  
</footer>  

CSS:

#content{
    min-height: 100%;
}
footer{
    height: 50px;
    position: relative;
    bottom: 0;
}

Answer 1

If I understand what you want, you need to make your footer position: fixed; and add padding-bottom to your container.

The body will sit behind the footer, therefore you need padding that is slightly larger than the height of the footer.

https://jsfiddle.net/c0Lrcg4s/

#content{
    min-height: 100%;
    padding-bottom:60px;
}
footer{
    height: 50px;
    position: fixed;
    bottom: 0;
}

You could use position: absolute; However, this isn't going to work properly footer as its relative container will be the viewport and will then scroll with the screen.

Answer 2

Try changing your css to for the footer to be absolute positioned:

footer{
    height: 50px;
    position: relative;
    bottom: 0
}

Codepen demo: http://codepen.io/anon/pen/NRxQQP