Question

我试图在没有jQuery的情况下学习一些东西。这是我面临的挑战之一。

我有一个固定的 contenteditable div，在向div添加文本时，如果scrollHeight超过clientHeight，我会收缩字体直到内容符合div。

偶尔我会“重建”以编程方式替换innerHTML的文本。或者用户可以删除应减少scrollHeight的文本，但在这两种情况下，scrollHeight仍然是最大值。我需要一些方法来增加字体大小以再次“适应”div。（理想情况下，这并不是非常昂贵）

示例：

我的clientHeight = 142，scrollHeight = 158.循环会缩小字体大小，直到scrollHeight为142。然后，用户删除一行文本，但scrollHeight仍然是142，没有变化。

减少/增加高度的代码：

    var textBox = document.getElementById('text');
    var current, min = 6, max = 14;
    current = textBox.style.fontSize.substr(0, textBox.style.fontSize.length - 2);
    current = parseInt(current);
    if (textBox.clientHeight < textBox.scrollHeight) {
        while (textBox.clientHeight < textBox.scrollHeight) {
            current--;
            if (current < min) break;
            textBox.style.fontSize = '' + current + 'pt';
        }
    } else if (textBox.clientHeight > textBox.scrollHeight) {
        while (textBox.clientHeight > textBox.scrollHeight) {
            current++;
            if (current > max) break;
            textBox.style.fontSize = '' + current + 'pt';
        }
    }

html（重要的是）：

<div id="text" contenteditable="true"></div>

css（重要的是）：

#text {
    position: relative;
    border: 1px solid blue;
    top: 180px;
    left: 31px;
    width: 300px;
    height: 132px;
    padding: 5px;
    font-family: 'mplantin';
    font-size: 14pt;
    font-weight: 200;
}

Answer 1

我在同一条船上，但是iframe;我不确定我的解决方案是否适合您的聊天窗口，因为它用于页面转换，但经过一些测试后，这是我的黑客攻击。 "content"是iframe的id，这是在需要更改页面时调用的javascript函数中执行的：

var c=document.getElementById("content");
c.width=0;
c.height=0;
c.src="page.html";

`src'赋值方法将值设置为0，然后实现所需的结果;你可能有办法不断地重新调整文本区域的大小;但是，我有视觉问题;我最终使用计时器，以便在页面之间的过渡是透明的时候进行更改。

Answer 2

这似乎解决了我的问题：

element.style.height = "auto";

Answer 3

@nixahn和@jeff的答案都适合我（chrome，ff）

iframe.style.height ="0"; // or "auto"
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<style>'+css+'</style>');
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

Answer 4

我使用了一个具有固定高度的div，而auto的问题在于它会调整元素的大小，我在设置内部HTML之后使用以下代码修复了该问题：

element.style.height = "auto"; element.style.height = "400px";

现在scrollHeight已正确重置，并给出了内部HTML的真实高度

Answer 5

我遇到了同样的问题-内容可编辑的div，scrollHeight在删除行时不会缩小。

被接受的答案并不能解决我的问题，但是删除div的父母的display: flex;可以解决问题。

scrollHeight在以编程方式更改内容后未重置

5 个答案: