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.

Hi, please always remember to Google first. A query for `Put a div on bottom of the screen, not page` will give you the correct answer (e.g. [div in bottom of window, not page](http://stackoverflow.com/q/2371588) — Pekka, Nov 28 '13 at 23:40
CSS: #info { height: 40px; position: relative; margin-top: 25%; background-color: #393838; opacity: } — Nikolas, Nov 28 '13 at 23:41

score 88 · Answer 1 · answered Nov 28 '13 at 23:49

88

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/

answered Nov 28 '13 at 23:49

putvande

15,068
3
34
50

1

By defualt it is at the left. You can set right: 0% – Diego Quirós Jul 12 '15 at 22:17

score 0 · Answer 2 · answered Apr 25 '16 at 01:11

0

How about adding entering as well?

.someDiv {
  position:fixed;
  width:50%;
  height:300px;
  margin-left:-25%;
  background:#063;
  bottom:0px;
  left:50%;
}

answered Apr 25 '16 at 01:11

MastaBaba

1,085
1
12
29

score 0 · Answer 3 · answered Jun 30 '20 at 15:22

0

Here is some Documentation that should help you with what you want. https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

Tl;dr, set "position: fixed" to place it at the bottom of the rendered part of the parent.

answered Jun 30 '20 at 15:22

Minecraftchest1

96
2
8

Put a div on bottom of the screen, not page

3 Answers3