Bootstrap Footer positioning - html

Question

I know that there are thousands of Topics about Footers but I still cannot ajust mine, I have tryed alot of things but nothing helped..... The footer should be always at the bottom of the page visible only when I scroll down the content.
Hope someone will have any suggestions!
This is my footer:
<div class="wrap">
......
</div>
<div class="footer">
<div class="container">
<div class="col-sm-4">
<img class="menu-icon" src="img/other/user.png"><h11>Account</h11>
<ul class="unstyled">
<li>ddd</li>
<li>ddd</li>
</div>
<div class="col-sm-4">
<img class="menu-icon" src="img/other/gear.png"><h11>Support</h11>
<ul class="unstyled">
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
</div>
<div class="col-sm-4">
<img class="menu-icon" src="img/other/share.png"><h11>Share Us</h11>
<ul class="unstyled">
<li><img class="menu-icon" src="img/other/tw.png">Twitter</li>
<li><img class="menu-icon" src="img/other/fb.png">Facebook</li>
<li><img class="menu-icon" src="img/other/gp.png">Google Plus</li>
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
}
.wrap {
height: auto !important;
min-height: 100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height: 140px;
background-color: #222;
}

Answer 1

Check if the below link works with you.
Fiddle
#footer {
position: relative;
background-color: darkcyan;
color: white;
z-index: 1;
}

Answer 2

Im not a 100% sure what your trying to achive. but i suspect that the error might be in your css.
you are currently using:
position:absolute;
And if you want your footer to stick to the bottom of the content, you shouldnt need to manipulate the element to use absolute positioning.
Is this the issue you are facing?
this example is using position:absolute as your code suggests.
https://jsfiddle.net/pvwLu49x/1/
is this what you are trying to do?
https://jsfiddle.net/pvwLu49x/2/