javascript - 使 div 在可调整大小的容器 div 内滚动

Question

我正在尝试制作一个看起来像 MS Windows 命令提示符的 div。

div 是可调整大小的，并且有两个子元素:一个标题栏 div 和一个内容 div。

我希望内容 div 在大于窗口 div 时获得滚动条。我希望标题栏始终可见且不滚动，并且不在滚动条的顶部。

http://www.webdevout.net/test?0vL交互式演示我的问题。单击内容文本并添加新行。当添加足够多的行以显示滚动条时，它们不会出现。

内容 div 设置了 overflow:auto。

将内容的 max-height 或 height 设置为 100% 不起作用，因为 100% 不考虑标题 -条高度，因此滚动条会在某些行离开底部后出现。此外，滚动条在出现时会遮挡外部 div 上的可拖动拇指，使其无法调整大小:(

Answer 1

只需将可调整大小的窗口更改为子“内容”<div> .这样你就可以调整 child 的大小<div>和 parent <div>自动调整大小以容纳其内容。

此外，不确定这是否是故意的，但您有 <div id ="Content" class="Content">在你的 html 和 .Frame>.Contents {在您的 CSS 中(注意内容一词在 CSS 中有一个“s”)。

我相信这就是您要找的:

http://www.webdevout.net/test?0wE