CODEWITHSUNDEEP
htmlcssalignmentprogress-bar
Nikolas
Nikolas

Reputation: 577

Put a div on bottom of the screen, not page

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.

Upvotes: 50

Views: 132908

Answers (3)

Minecraftchest1
Minecraftchest1

Reputation: 124

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.

Upvotes: 2

MastaBaba
MastaBaba

Reputation: 1154

How about adding entering as well?

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

Upvotes: 0

putvande
putvande

Reputation: 15213

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/

Upvotes: 93

Related Questions