CODEWITHSUNDEEP
jqueryhtmlcss
Packy
Packy

Reputation: 3573

position div at bottom of screen

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?

Upvotes: 2

Views: 7443

Answers (5)

DokiCRO
DokiCRO

Reputation: 4705

This will fix your problem

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

Upvotes: 1

Amah
Amah

Reputation: 64

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;
}

Upvotes: 1

eliteware
eliteware

Reputation: 144

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;
}

Upvotes: 0

scmccarthy22
scmccarthy22

Reputation: 631

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.

Upvotes: 0

EyasSH
EyasSH

Reputation: 3769

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.

Upvotes: 3

Related Questions