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

Question

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

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

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

在此处输入图像描述

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

内容 div 已overflow:auto设置。

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

score 1 · Accepted Answer

添加以下 CSS：

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

干杯；）

score 1 · Accepted Answer

只需将您的可调整大小的窗口更改为子 'content' <div>。这样您就可以调整孩子<div>的大小，而父母会<div>自动调整大小以保存其内容。

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

我相信这就是您正在寻找的：

score 0 · Accepted Answer

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

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

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

score -1 · Accepted Answer

-1

添加 CSS 属性

overflow:auto;

于 2013-08-22T10:13:26.457 回答

score -1 · Accepted Answer

-1

只需将其添加到您的 CSS

overflow: auto;

于 2013-08-22T10:16:52.880 回答

5 回答 5