在可调整大小的容器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

添加以下CSS：

.Content {
    overflow: auto;
    height: inherit;
}

在这里：http://www.webdevout.net/test?0v-

干杯;）

Answer 2

只需将可调整大小的窗口更改为子“内容”<div>即可。这样您就可以调整孩子<div>的大小，并且父<div>会自动调整大小来保存其内容。

另外，不确定它是否是故意的，但你的html中有<div id ="Content" class="Content">而CSS中有.Frame>.Contents {（请注意CSS中的内容有's'字样。）

我相信这就是你要找的东西：

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

Answer 3

我假设您的HTML树看起来像：

• 对话
  • 标题栏
  • 内容

要使内容可滚动，请使用overflow CSS属性

.content {
    overflow: auto;
    height: inherit;
}

Answer 4

添加CSS属性

overflow:auto;

Answer 5

只需将其添加到您的CSS

即可

overflow: auto;