Can't set footer to bottom - css

Question

I have this code:
<div id="login-frame" class="frame-container">
<h2>Dash</h2>
<p>Wellcome</p>
<hr>
<div class="alert hidden"></div>
<div class="frame-content">
<div class="row">
<div id="appuntamenti_futuri" class="command-buttons tile col-xs-6 btn">
<b class="title">Appuntamenti futuri</b>
</div>
<div id="storico_appuntamenti" class="command-buttons tile col-xs-6 btn">
<b class="title">Storico</b>
</div>
</div>
<div class="row">
<div id="prenotazioni" class="command-buttons tile col-xs-12 btn">
<b class="title">Prenota</b>
</div>
</div>
<div class="row">
<div id="card" class="command-buttons tile col-xs-6 btn">
<b class="title">Card</b>
</div>
<div id="prepagate" class="command-buttons tile col-xs-6 btn">
<b class="title">Abbonamento prepagate</b>
</div>
</div>
<div id="frame-footer">
<span style="color: #FFFFFF">Developed by</span>
<a href="#" target="_blank">
Someone
</a>
<span id="select-language" class="label label-warning">
Language
</span>
</div>
</div>
and this is a jsfiddle
how you can see the footer isn't on the bottom but there is a blank line after it, I set the background of the body for show you the problem. What I did wrong?

Answer 1

To set any footer element to the bottom you need to use position: absolute or position: fixed. Please read this article about Position in CSS for a complete reference.
Using position: relative on your desired footer element's parent will ensure that your footer element, which now has position: absolute, is relative to its parent. Immediately after, using bottom: 0 on your footer element will shove it straight to the bottom of the screen. From there on, you can set its width to width: 100% and that will create the absolute basic layout of a footer.
Finally it goes without saying, ensure that your html and body elements cover the entire screen, so that your footer is positioned truly at the bottom of the screen. I wrote a very simple example (some sort of template) here:
html, body {
width: 100%;
height: 100%;
}
.my-page-wrapper {
position: relative;
}
.my-bottom-footer {
position: absolute;
bottom: 0;
}
In conclusion, applying the above comments to your code yields the following JSFiddle.
Let me know if you have any questions.
EDIT
Based on my above JSFiddle and the comments below, we have concluded that all was needed was for the footer element to sit directly beneath the login-frame element, for which I removed position: absolute and bottom: 0. The relevant part of the problem, which was the border-top property within the footer element, is all that had to be removed from the code. This can be seen in the updated JSFiddle.

Answer 2

i wanted to do something similar ages ago. try this as a css class on your div
bottom:36px;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
height:30px;
width:500px;
margin-left:205px;
background:#efefef;
color:#000000;
overflow:auto;

Answer 3

Not sure if I'm understanding you correctly but this should be what you want:
#frame-footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}