绝对位置div里面的滚动div

我想要做的是修复div的“底部”的滚动div（“内容”）的底部，但你可以看到滚动div的原因它移动。绝对位置div里面的滚动div

任何想法，我可以做到这一点与JS放在尽量不要。

干杯。

请参阅随附的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; 
}

来源

2013-02-26 RubbleFord

你需要更具体指的是“股利” .. – henser 2013-02-26 12:26:37

一个叫底部:-) – RubbleFord 2013-02-26 12:27:36

如果你要滚动的底部沿div的，比你需要position: fixed而不是~~position: absolute~~

来源

2013-02-26 12:28:50

我认为固定的位置与浏览器窗口有关。 – RubbleFord 2013-02-26 12:51:11

@RubbleFord是的这是... – 2013-02-26 12:53:12

@RubbleFord http://stackoverflow.com/questions/6794000/css-fixed-position-but-relative-to-container – 2013-02-26 12:53:57

变化底部css来这...这将做到这一点：

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

你不需要确定positi在所有。

这里是更新的jsfiddle - >http://jsfiddle.net/Ed6XM/1/

来源

2013-02-26 12:29:33 henser

左，右，底但没有位置？ – 2013-02-26 12:31:18

尝试一下，看看它是不是工作 – henser 2013-02-26 12:32:28

现在在这种情况下，你不需要任何职位声明，甚至没有左，右和底部 – 2013-02-26 12:32:42

裹你想另一个DIV和位置这个底部的滚动区域内落后滚动内容。

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

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

或者稍微更好的版本，其中滚动条是不固定的元素如下：

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

来源

2014-11-11 11:35:20

绝对位置div里面的滚动div

回答

相关问题