Absolute position div inside of scrollable div

Question

What I'm trying to do is fix the div with the id of "bottom" to the bottom of the scrollable div("Content"), but as you can see scrolling the div causes it to move.

Any ideas, I can do this with JS putting trying not to.

Cheers.

Please see the attached JSFiddle, http://jsfiddle.net/Ed6XM/

<div style="height:500px">
    <div id="left">Left</div>
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet
        nisi at purus ullamcorper viverra porttitor sit amet velit. Suspendisse
        blandit nisl nec mauris congue faucibus. Donec auctor congue tellus eget
        dignissim. Class aptent taciti sociosqu ad litora torquent per conubia
        nostra, per inceptos himenaeos. Sed cursus orci in libero faucibus et porta
        lectus molestie. Aliquam consectetur libero nec mi viverra varius. Sed
        adipiscing vehicula convallis. Nulla eget vestibulum tortor. Proin tellus
        dui, fermentum at pretium quis, adipiscing et purus. Nunc eget quam odio.
        Donec interdum consectetur pharetra. Donec porttitor arcu id magna porttitor
        eu pellentesque lacus placerat. Vivamus gravida urna cursus est tristique
        id iaculis sem sagittis. Etiam vulputate feugiat lacus vel suscipit. Nullam
        ut sagittis est. Pellentesque auctor mattis nibh quis consequat. Suspendisse
        pellentesque, quam non suscipit faucibus, augue nisl bibendum est, vitae
        lacinia neque odio non quam. Nulla facilisi. Pellentesque id quam justo,
        accumsan bibendum dui. Sed elementum viverra diam, in laoreet tortor aliquam
        eu. Nunc sagittis libero at justo pellentesque nec sodales orci condimentum.
        Duis id nunc quam, eu dapibus odio.
        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet
        nisi at purus ullamcorper viverra porttitor sit amet velit. Suspendisse
        blandit nisl nec mauris congue faucibus. Donec auctor congue tellus eget
        dignissim. Class aptent taciti sociosqu ad litora torquent per conubia
        nostra, per inceptos himenaeos. Sed cursus orci in libero faucibus et porta
        lectus molestie. Aliquam consectetur libero nec mi viverra varius. Sed
        adipiscing vehicula convallis. Nulla eget vestibulum tortor. Proin tellus
        dui, fermentum at pretium quis, adipiscing et purus. Nunc eget quam odio.
        Donec interdum consectetur pharetra. Donec porttitor arcu id magna porttitor
        eu pellentesque lacus placerat. Vivamus gravida urna cursus est tristique
        id iaculis sem sagittis. Etiam vulputate feugiat lacus vel suscipit. Nullam
        ut sagittis est. Pellentesque auctor mattis nibh quis consequat. Suspendisse
        pellentesque, quam non suscipit faucibus, augue nisl bibendum est, vitae
        lacinia neque odio non quam. Nulla facilisi. Pellentesque id quam justo,
        accumsan bibendum dui. Sed elementum viverra diam, in laoreet tortor aliquam
        eu. Nunc sagittis libero at justo pellentesque nec sodales orci condimentum.
        Duis id nunc quam, eu dapibus odio.
        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet
        nisi at purus ullamcorper viverra porttitor sit amet velit. Suspendisse
        blandit nisl nec mauris congue faucibus. Donec auctor congue tellus eget
        dignissim. Class aptent taciti sociosqu ad litora torquent per conubia
        nostra, per inceptos himenaeos. Sed cursus orci in libero faucibus et porta
        lectus molestie. Aliquam consectetur libero nec mi viverra varius. Sed
        adipiscing vehicula convallis. Nulla eget vestibulum tortor. Proin tellus
        dui, fermentum at pretium quis, adipiscing et purus. Nunc eget quam odio.
        Donec interdum consectetur pharetra. Donec porttitor arcu id magna porttitor
        eu pellentesque lacus placerat. Vivamus gravida urna cursus est tristique
        id iaculis sem sagittis. Etiam vulputate feugiat lacus vel suscipit. Nullam
        ut sagittis est. Pellentesque auctor mattis nibh quis consequat. Suspendisse
        pellentesque, quam non suscipit faucibus, augue nisl bibendum est, vitae
        lacinia neque odio non quam. Nulla facilisi. Pellentesque id quam justo,
        accumsan bibendum dui. Sed elementum viverra diam, in laoreet tortor aliquam
        eu. Nunc sagittis libero at justo pellentesque nec sodales orci condimentum.
        Duis id nunc quam, eu dapibus odio.
        <div id="bottom">sds</div>
    </div>
</div>


#left {
    width:20%;
    float:left;
    border:1px solid black;
    height:100%;
}
#content {
    margin-left:20%;
    border:1px solid yellow;
    height:100%;
    position:relative;
    overflow:auto;
    margin-bottom:20px;
}
#bottom {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background-color:red;
    height:20px;
}

you need to be more specific referring to "the div" ... – henser Feb 26 '13 at 12:26 — henser, Feb 26 '13 at 12:26
the one called bottom :-) – RubbleFord Feb 26 '13 at 12:27 — RubbleFord, Feb 26 '13 at 12:27

score 2 · Answer 1 · answered Feb 26 '13 at 12:28

2

If you want to scroll the bottom div along, than you need position: fixed and not ~~position: absolute~~

answered Feb 26 '13 at 12:28

Mr. Alien

153,751
34
298
278

I thought position fixed was relevant to the browser window. – RubbleFord Feb 26 '13 at 12:51
@RubbleFord http://stackoverflow.com/questions/6794000/css-fixed-position-but-relative-to-container – Mr. Alien Feb 26 '13 at 12:53

score 1 · Answer 2 · answered Nov 11 '14 at 11:35

Wrap the content you want to scroll inside another DIV and position this behind the scrollable area at the bottom.

#scrollable {
    overflow: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

http://jsfiddle.net/Ed6XM/10/

Or a slightly nicer version where the scrollbars aren't below the fixed element:

http://jsfiddle.net/Ed6XM/11/

henser · Answer 3 · 2013-02-26T12:35:32.810

0

change bottom css to this ... this will do it:

 #bottom {
        background-color:red;
        height:20px;
    }

You don't need to determine position at all.

here is the updated JsFiddle -> http://jsfiddle.net/Ed6XM/1/

edited Feb 26 '13 at 12:35

answered Feb 26 '13 at 12:29

henser

3,307
2
36
47

Now in this case you don't need any position to be declared and not even left, right and bottom – Mr. Alien Feb 26 '13 at 12:32
That's not quite what I want, I wanted the div to stay in view anchored at the bottom of the scrollable div. – RubbleFord Feb 26 '13 at 12:53

Absolute position div inside of scrollable div

3 Answers3