Question

我正在尝试将可识别“底部”ID的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;
}

Answer 1

如果你想要滚动底部div，那么你需要position: fixed而不是 ~~position: absolute~~

Answer 2

将要滚动的内容换行到另一个DIV中，并将其放在底部的可滚动区域后面。

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

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

或者滚动条不在固定元素下方的更好的版本：

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

Answer 3

将底部css改为此...这样就可以了：

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

您根本不需要确定位置。

这里是更新的JsFiddle - ＆gt; http://jsfiddle.net/Ed6XM/1/

可滚动div内部的绝对位置div

3 个答案: