Put a div on bottom of the screen, not page

Question

I am trying to put a gray bar on the bottom of the screen of my webpage, regardless of the resolution. However, when I try, it seems to just go up or down when I go in a different resolution. Is there any way to fix this?

Also, the bar is made out of CSS using the div id tag.

/* HTML*/ <div id="info">Scroll for info</div>  /* CSS */ <style> #info {      height: 40px;      position: relative;      margin-top: 25%;      background-color: #393838;      opacity:  } </style> 

EDIT: I want it to be on the bottom of the screen, but then when I scroll down it goes up towards the top of my screen.

Answer 1

If you want it on the bottom and always at the bottom, you have to use position: fixed. You could try this:

#info {      height: 40px;      position: fixed;      bottom:0%;     width:100%;      background-color: #393838;      opacity: 1; } 

http://jsfiddle.net/rX4nd/1/