1

我想要做的是将id为“bottom”的div修复到可滚动div（“Content”）的底部，但正如您所见，滚动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;
}
4

3 回答 3

2

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

于 2013-02-26T12:28:50.150 回答
1

将要滚​​动的内容包裹在另一个 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-11T11:35:20.557 回答
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/

于 2013-02-26T12:29:33.910 回答