position div at bottom of screen

Question

I am trying to get a div at the bottom of the viewport but it doesnt seem to be working right. I have this set up

html

<div class="parent">
  <div class="bottom">
  </div>
</div>

css

.bottom{
  position:absolute;
  bottom:0;
}

The trouble being that the parent div is getting its height from JS and adding some style to div dynamically like <div class="parent" style="height: 483px;"> so then basically the div doesnt show up at the bottom until I resize the screen. Is there a way to dynamically get the screen size then add the css to make the div stick to the bottom?

Just to clarify the question, do you want to `.bottom` element to always be visible and positioned at the bottom of the screen? Or you want it to act like a footer and be visible only at the bottom of your document (in this case, it won't be visible if your content is bigger than your screen size)? From what I understood, [your code is working well](http://jsfiddle.net/lun471k/xswnnqed/) — Jeff Noel, Jan 19 '15 at 18:39
I wanted it to always be visible at the bottom of the screen. — Packy, Jan 19 '15 at 18:41
EyasSH's answer should do the trick. [Here is the kind of behavior](http://jsfiddle.net/lun471k/xswnnqed/2/) it'll give to your `bottom` class element. Just apply `position:fixed;` to your `bottom` element. — Jeff Noel, Jan 19 '15 at 18:42
Duplicated L Try this stack Question Answer : [enter link description here][1] [1]: http://stackoverflow.com/questions/27985248/footer-needs-to-stick-to-bottom-when-content-is-less/27985504#27985504 — nifCody, Jan 19 '15 at 18:43
possible duplicate of [Make div stay at bottom of page's content all the time even when there are scrollbars](http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol) — Jeff Noel, Jan 19 '15 at 18:52
@JeffNoel I guess I should change the question a little. The .bottom is placed exactly where I want it to be with the current CSS its just isnt doing it on page load, I have to resize the browser window for it to show up. I think this is because the parent div's height is dynamically loaded by JS. — Packy, Jan 19 '15 at 18:55
The CSS should react and adjust even if your content is loaded dynamically. I would suggest that you setup a simple [JSFiddle](http://jsfiddle.net) to help us find a solution according to your needs. — Jeff Noel, Jan 19 '15 at 18:58

score 3 · Answer 1 · answered Jan 19 '15 at 18:36

3

Use position: fixed; instead of absolute. That'll position the element relative to the viewport, rather than the document.

This matters if your document ends up being longer than screen size.

answered Jan 19 '15 at 18:36

EyasSH

3,679
22
36

score 1 · Answer 2 · edited Oct 19 '16 at 11:39

1

This will fix your problem

.bottom { 
    position:fixed;
    bottom:0;
    z-index:2;
    width:100%; 
}

edited Oct 19 '16 at 11:39

krlzlx

5,752
14
47
55

answered Jan 19 '15 at 19:30

DokiCRO

4,565
3
20
22

score 1 · Answer 3 · answered Jan 19 '15 at 19:33

An absolute position element is positioned relative to the first parent element that has a position other than static. An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled. You should change the CSS

.bottom{
  position:fixed;
  bottom:0;
}

score 0 · Answer 4 · answered Jan 19 '15 at 18:47

Are you trying to position a footer at the bottom of the viewport? This might help: http://css-tricks.com/snippets/css/sticky-footer/

Also, if you want .bottom to be positioned relative to .parent, you'll need to add position:relative to .parent. Then bottom:0 will place .bottom at the bottom of .parent.

score 0 · Answer 5 · answered Jan 19 '15 at 18:53

0

What you have to do is change the position of your div to fixed rather than absolute, so that the javascript's styling won't be a problem

<div class="parent">
  <div class="bottom">
  </div>
</div>

.bottom{
  position:fixed;
  bottom:0;
}

answered Jan 19 '15 at 18:53

eliteware

144
1
2
15

position div at bottom of screen

5 Answers5