Html Div css根据内容动态自动调整高度

我有一个具有自动高度和可调文本区域的div。我希望父div根据内容自动展开/折叠

要在Chrome中重新创建问题，请执行以下操作：

向下调整文本框的大小以增加父div的高度

重新调整文本框的大小，使其回到初始位置。您将看到父高度不会收缩

*可拖动的文本区域只是select2框的表示形式

以下是其中一项：

#父级{
背景颜色：绿色；
-webkit列数：2；
}

测试
测试
测试
测试
测试
测试
测试
测试

我已将相关Javascript代码添加到您的JSFIDLE中，有关所需的功能，请查看以下链接：

var autoExpandTextArea=函数（textAreaName、maxRows、minRows）{
var textarea=document.getElementById（textAreaName）；
var limitRows=maxrrows；
if（textarea==null | | minRows>maxrrows）
返回；
var commonEventHandlerCode=函数（textAreaA、limitRowsB、scrollHeightC）
{
var rows=parseInt（textAreaA.getAttribute（“rows”）；
如果（行scrollHeightC）{
行++；
}else if（行>1&&text区域A.scrollHeight
#父级{
背景颜色：绿色；
-webkit列数：2；
}

测试
测试
测试
测试
测试
测试
测试
测试
我已将相关Javascript代码添加到您的JSFIDLE中，有关所需的功能，请查看以下链接：



var autoExpandTextArea=函数（textAreaName、maxRows、minRows）{
var textarea=document.getElementById（textAreaName）；
var limitRows=maxrrows；
if（textarea==null | | minRows>maxrrows）
返回；
var commonEventHandlerCode=函数（textAreaA、limitRowsB、scrollHeightC）
{
var rows=parseInt（textAreaA.getAttribute（“rows”）；
如果（行scrollHeightC）{
行++；
}else if（行>1&&text区域A.scrollHeight
#父级{
背景颜色：绿色；
-webkit列数：2；
}

测试
测试
测试
测试
测试
测试
测试
测试
如果您不提供固定高度，您的父div（#textarea）将自动调整大小。如果只想垂直调整大小，请尝试使用-

textarea {
    resize: vertical;
    overflow: auto;
}

如果不提供固定高度，则父div（#textarea）将自动调整大小。如果只想垂直调整大小，请尝试使用-

textarea {
    resize: vertical;
    overflow: auto;
}

考虑使用
contenteditable
属性替换textarea。它将表现为普通块元素（因此展开更多内容），但不可编辑。缺点是，它需要javascript将其内容添加到表单字段，以便可以将其发布到服务器

有关示例，请参见。

编辑：添加了一个示例，说明编辑后可编辑文件如何折叠到其初始大小。
考虑使用
contenteditable
属性替换文本区域。它将表现为普通块元素（因此展开更多内容），但不可编辑。缺点是，它需要javascript将其内容添加到表单字段，以便可以将其发布到服务器

有关示例，请参见。

编辑：添加了一个示例，说明编辑后可编辑文件如何折叠到其初始大小。
CSS列分布存在许多错误，这可能是大量使用砌体的原因

您可以尝试强制webkit浏览器在textarea输入或调整大小时重新呈现列。另一个问题是：webkit不会在textarea上触发resize事件，所以您也需要定义它：


$（document）.on（'ready'，function（）{
/*Chrome不会触发文本区域大小调整：*/
$（'textarea'）。每个（函数（i）{
var thisTextarea=$（此）；
thisTextarea.data（'x'，thisTextarea.outerWidth（））；
thisTextarea.data（'y'，thisTextarea.outerHeight（））；
thisTextarea.on（'mouseup'，函数（e）{
如果（thisTextarea.outerWidth（）！=thisTextarea.data（'x'）| | thisTextarea.outerWidth（）！=thisTextarea.data（'y'））{
thisTextarea.trigger（'resize'）；
};
thisTextarea.data（'x'，thisTextarea.outerWidth（））；
thisTextarea.data（'y'，thisTextarea.outerHeight（））；
});
});
var colContainer=$（'父'）；
$（'textarea'）。在（'input resize'，函数（e）上{
colContainer.css({
“-webkit列计数”：“1”
});
setTimeout（函数（）{
colContainer.css({
“-webkit列计数”：“2”
});
}, 0);
});
});
#父级{
巴克