javascript - 添加内容时设置空div的高度保持静态

Question

我们的表单存在用于文本反馈的 div 的高度问题。

在网页上，我有一个空的 div，其 id 应用了样式。当用户在表单中输入信息时，Javascript 将应用于 div。在 Javascript 运行并将文本放入 div 之前，它只有几个像素的高度，当 Javascript 添加文本时，div 增加高度并将其下方的表单元素向下推。表单应保持静态，不影响用户交互。

对于文本，div 高 29 像素。现在我可以将以下样式应用于 div。

height: 29px;

这个解决方案似乎并不安全，因为其他浏览器可能呈现不同，或者有人可能使用不同的字体大小。

设置空 div 的高度以在添加文本时阻止它​​改变大小的最佳实践解决方案是什么？

Answer 1

如果您为 div 设置一些固定高度(例如...29px)，它不会改变大小...为了更好地支持不同的 font-size 和/或行数，您可以计算该特殊数字 (29px) 作为您的 font-size * 的乘积line-height * numberOfLinesYouWantToAllow，并相应地将此数字设置为 div 的 height。

CSS

height: 29px;
overflow: auto;