Question

我在另一次潜水中有一个div。由于外部div具有固定尺寸，因此内部div应具有滚动条。我知道如何将我的滚动条添加到外部滚动条，但每当我尝试将其移动到内部滚动条时，它只会溢出外部滚动条，完全忽略其边界。

很难描述。我希望你看一下它会更清楚。

<div style="height:5em;background-color:#eee;overflow:auto">
  <div>Should not have a scroll bar (is dynamic)</div>
  <div style="margin:1ex;background-color:#f00;">
    Should have a scroll bar (is dynamic)<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
  </div>
</div>

Answer 1

要使用滚动条的div必须具有高度。试试这个：

<div id="top" style="height:5em;background-color:#eee;">
  <div id="first-child">Should not have a scroll bar (is dynamic)</div>
  <div id="second-child" style="margin:1ex;background-color:#f00;height:1em;overflow:auto;">
    Should have a scroll bar (is dynamic)<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
  </div>
</div>

Answer 2

试试这个：

<div style="height:5em;background-color:#eee;postion:absolute">
  <div>Should not have a scroll bar (is dynamic)</div>
  <div style="height:4em; margin:1ex;background-color:#f00; overflow:auto">
    Should have a scroll bar (is dynamic)<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
    Too much stuff<br>
  </div>
</div>

http://jsfiddle.net/kph6G/

Answer 3

<div style="height:5em;background-color:#eee;">
  <div>Should not have a scroll bar (is dynamic)</div>
  <div style="height:3em;margin:1ex;background-color:#f00;overflow:auto"> <!--this has to have a height in order for it to overflow -->
    Should have a scroll bar (is dynamic)<br>
    Too much stuff<br />
    Too much stuff<br />
    Too much stuff<br />
    Too much stuff<br />
    Too much stuff<br />
  </div>
</div>

滚动条中的子元素

3 个答案: