CSS bottom bar isn't correctly shown with chrome - html

Question

I have a bar on the bottom of my webpage and the code is the following:
<div class="casa5">
<label style="margin:auto;"><font color="orange">★</font> my text <font color="orange">★</font></label>
</div>
And here you can see the CSS:
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position:absolute;
left: 0;
right: 0;
text-align:center;
font: 90% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
}
This div is displayed in the bottom of the page as you can see here:
I am using firefox. By the way I am in trouble because when I open the page with Chrome, I have this view:
As you can see, when you open the page with Firefox, the bar lies on the bottom of the page, but when I load the same page with Chrome, where is a gap between my div and the bottom.
I want the bar to be displayed on the bottom of the page only when I scroll down until the end. How could I fix this?

Answer 1

You just need to add bottom: 0 to your css:
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position:absolute;
left: 0;
right: 0;
text-align:center;
font: 90%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
bottom: 0;
}
Also, you should probably change position:absolute; to position: fixed; for it to always be at the bottom whether the user scrolls or not.
Fiddle
However, if you would like for it to always be at the end of the page, you can do something like this:
html {
position: relative;
}
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position: absolute;
left: 0;
right: 0;
text-align:center;
font: 90%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
bottom: 0;
}
It changes the html to position: relative and keeps the footer at position: absolute
Fiddle
As suggested by http://mystrd.at/modern-clean-css-sticky-footer/

Answer 2

Try adding bottom: 0; to your CSS.
Working fiddle: http://jsfiddle.net/gzX7y/