Question

如何滚动才能在另一个div内的div上工作？

以下是我的示例代码，此处显示结果的a link to a fiddle：

编辑：我知道我可以在外部div上滚动，但我不想（例如，标题会滚动然后，我想保留它）。

<body style="background-color:gray">
    <div id="outerDiv" style="background:white;height:200px">
        <h4 class="sideTable">Outer Div</h4>
        <div id="innerDiv" syle="overflow: auto">
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
        </div>
    </div>
</body>

Answer 1

http://jsfiddle.net/justtal/kQkd9/3/

只需给：outerDiv

overflow-y: scroll

即使没有必要，

scroll也会显示滚动条。

你也可以“自动”

你也犯了一个错误：

在#innerDiv中 syle =＆gt;式

Answer 2

您正在将overflow:auto添加到错误的元素中。将其添加到#outerDiv。

EXAMPLE HERE

#outerDiv {
    background:white;
    height:200px;
    overflow: auto;
}

使用值auto是最佳选择，因为仅当高度不能修复包含元素时才会显示滚动条。使用scroll将始终导致滚动条无论如何显示。

Answer 3

添加以下CSS：

<强> 1

#outerDiv{
   overflow:auto; /* Displays scroll only when the contents exceed the containers width or height specified */
}

Demo

我也纠正了你的HTML：

这是 - <div id="innerDiv" syle="overflow: auto"> X

收件人 - <div id="innerDiv">

其他溢出选项

2 溢出：滚动; // 始终显示滚动

3 溢出：隐藏; // 隐藏滚动

4 仅水平滚动使用 overflow-x ，仅垂直滚动使用溢出-y

Answer 4

如果外部div设置为100％的高度，则问题只是滚动才有效。所以，如果你不想这样做，你需要另一个介入的div？可能有更好的方法，但这对我有用（fiddle link）：

<body style="background-color:gray">
    <div id="outerDiv">
        <h4 class="sideTable">Outer Div</h4>
        <div id="holdingDiv">
            <div id="innerDiv">
                Foo1<br />
                Bar1<br />
                Foo2<br />
                Bar2<br />
                Foo3<br />
                Bar3<br />
                Foo4<br />
                Bar4<br />
                Foo5<br />
                Bar5<br />
                Foo6<br />
                Bar6<br />
            </div>
        </div>
    </div>
</body>

CSS：

#outerDiv {
    background:white;
    height:200px;
    overflow:hidden;
}

#holdingDiv {
    height:100%;
}


#innerDiv {
    overflow:auto;
    height:100px
}

在另一个Div内没有滚动Div

4 个答案: