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

一番下のdivをスクロールしたい場合は、必要以上position: fixedに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

下のcssをこれに変更します...これはそれを行います：

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

位置を決める必要はまったくありません。

これが更新されたJsFiddleです-> http://jsfiddle.net/Ed6XM/1/

于 2013-02-26T12:29:33.910 に答える