Абсолютное положение div внутри прокручиваемого div

Question

То, что я пытаюсь сделать, это зафиксировать div с идентификатором «bottom» до нижней части прокручиваемого div («Содержимое»), но, как вы видите, прокрутка div вызывает он должен двигаться.

Любые идеи, я могу сделать это с JS, стараясь не делать этого.

Cheers.

Пожалуйста, вложенном 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; 
} 

Answer 1

Если вы хотите, чтобы прокрутить нижнюю Див вдоль, чем вам нужно position: fixed и не position: absolute

Answer 2

изменение нижней CSS к это ... сделают это:

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

Вам не нужно определять positi на всех.

здесь обновленное JsFiddle ->http://jsfiddle.net/Ed6XM/1/

Answer 3

Wrap содержимое, которое Вы хотите, чтобы прокрутить в другой DIV и положение этого за прокруткой в ​​нижней части.

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

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

Или немного лучше вариант, когда полоса прокрутки не ниже фиксированного элемента:

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