How to make a div stay at the bottom of another di

Question

I have a div that is 400px high and it has content that scrolls inside. I have another div with an image inside, this div sits at the bottom of this parent div using position:absolute; bottom:0; but when I scroll it moves up the parent div with the content.

I have used jQuery to change the position of the div to the bottom each time the user scrolls the parent div, this works but it jumps each time the div scrolls.

Is there a way to do this with a smooth scroll? I would like it to just sit at the bottom of the parent div and not move at all.

Thanks

Answer 1

You can't do what you are trying to do in this manner. The before suggestion of position relative and absolute will help you to "initialize" the img in the bottom of its parent div, but if the "scrollHeight" (correct me if i'm wrong someone, not sure i'm using correct vocab here) changes, aka, user scrolls the div down, then the div that is absolutely positioned will hold such absolute position and thus, scroll with the content. You can't use Fixed positioning as it will fix to the screen and not to the nearest parent relative. Whether you want to or not, the fact is, the easiest way to do this is going to be to set up a parernt that contains 2 divs, one for your scrollable content, 1 for your image,, and position the 2 so that the 2nd "appears" attached to the bottom of the 1st.

Answer 2

You could put the div with content inside of another div and position the image relative to the parent. You would have to account for the height of the scrollbar if present, but other than that it should work. I'll try to come up with a jsfiddle for you.

http://jsfiddle.net/AwH9S/

You might want to implement some javascript to determine the size of the scrollbar and whether or not it's present.

Answer 3

Can your share some HTML/CSS?

In your css

#theDiv {
    position: absolute;
    bottom: 0;
}

and on it's parent give it

position: relative;