CODEWITHSUNDEEP
jquerycss
santa
santa

Reputation: 12512

Position a <div> that stays at the bottom

How do I position a <div> at the bottom of the page that will stay there even if I scroll a page? Can it be done with just CSS or do I need to use jQuery too?

DEMO

Upvotes: 3

Views: 673

Answers (3)

thirtydot
thirtydot

Reputation: 228172

Use position: fixed on your "footer" div, and add padding-bottom: 50px (the same height as your "footer" div) to body so that none of the content is hidden when you scroll to the bottom:

See: http://jsfiddle.net/gyExR/19/

body {
    padding-bottom: 50px
}
div {
    position: fixed;
    ..
}

Browser support: http://caniuse.com/css-fixed

Upvotes: 1

Jacob
Jacob

Reputation: 78840

You can used fixed positioning for your div:

div.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;   
    height: 100px;     
    /* etc. */
}

Upvotes: 2

Niklas
Niklas

Reputation: 30002

Just put position:fixed;:

http://jsfiddle.net/niklasvh/gyExR/17/

Upvotes: 7

Related Questions