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

我正在尝试创建一个类似于MS Windows命令提示符的div

该div可调整大小，并有两个子项：标题栏div和内容div

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

以交互方式演示我的问题。单击内容文本并添加新行。当添加足够的行以显示滚动条时，它们不会显示

content div设置了

溢出：auto

将内容上的

max height

或

height

设置为

100%

不起作用，因为100%不考虑标题栏的高度，因此在某些行离开底部后会出现滚动条。此外，当滚动条出现时，会遮挡外部div上的可拖动拇指，使其无法调整大小：（

添加CSS属性

overflow:auto;

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

---

只需将此添加到CSS中

溢出：自动；

添加以下CSS：

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

给你：

---

干杯；）

我假设您的HTML树如下所示：

• 对话
  • 标题栏
  • 内容

要使内容可滚动，请使用

overflow

CSS属性

overflow:auto;

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

---

只需将可调整大小的窗口更改为子“内容”

。这样，您可以调整子

的大小，而父

会自动调整大小以容纳其内容

另外，不确定这是否是故意的，但您的html中有

，CSS中有

.Frame>.Contents{

（注意，CSS中的content一词有一个“s”）

我相信这就是你想要的：

---

我在问题中添加了一个说明，说明了为什么这不起作用。滚动条出现在内容大于容器之后，而不是剩余空间之后：（此外，它会停止调整大小：（你检查过我的链接了吗？它非常适合我。你能详细说明它是否仍然不能正常工作，或者提供一个我们可以看到问题的链接吗？谢谢！你希望滚动条随时出现吗？如果是，那么使用

overflow-x:visible；

代替。是的，你的链接解决方案对我不起作用：（我使用的是Chrome OSX。只要文本行仅部分可见，我就希望滚动条出现。100%的父div不是内容的空间；还有一个标题栏。此外，当滚动条出现时，您不能再拖动外部div的角来调整所有内容的大小。如果您添加足够的行以显示滚动条，则d您使用滚动条滚动到底部，是否显示了完全可见的最后一行？我没有。也许这最容易解释我的意思？建议的CSS在他的示例中不起作用。这是因为他的.Content div容器没有调整大小，因此没有触发滚动。div的高度无限延伸ly和正在被隐藏。因此我们需要确保首先限制div的高度，请参见我的答案；）@usernotfound我明白了。发布此答案时没有关于调整大小的信息。我使用了您的示例更正此答案。