Untitled

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

$(function(){
    $('#body').css('padding-bottom', $('#footer').height()+'px');
});

<div class="wrapper">
<div class="content"><p>Page Content</p></div>
<div class="footer-push"></div>
</div>

<footer>
  <p>footer-text</p>
  <img src="http://placekitten.com/100/100" alt="footer image">
</footer>

// our page element

html {
height:100%;
}

body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}

.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}

footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}

<body>
    <div class="example">
        <p>Lorem ipsum dolor sit amet consectetur...</p>
    </div>

    <footer>
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </footer>
</body>

body {
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}