html文本框居下,HTML文本编辑器div - 强制文本从底部开始 - 从下到上文本框

简而言之，我想要一个从底部到顶部的文本框，它保持我定义的宽度和高度。添加样式位置：relative时，保持光标左下方有效，这使得div在添加文本时自动增长。使用position：absolute时，光标变为左上角。

如何重现问题：

打开jsfiddle并向右下方写入更多文本到文本框中，直到它溢出。目标是保持div的大小，但同时保持插入符号底部

我被迫使用div“contenteditable = true”来创建一个漂亮的文本框。 div由服务器“swellrt”创建，我可以添加属性和样式，但我不能改变文本进入这一个div。

这是一个关于协作文本编辑器的大局，服务器负责处理所有用户所有文本的div，并从同一div中的用户进行编辑，使用a发布和获取所有更改直播webrtc频道。在客户端，我只能更改由服务器控制的div的样式和属性。

插入符号或光标基本上应该开始，并且(只要不被用户移动)停留在文档的底部。

我能够用下面的例子做到这一点，但是使用position：relative，div会在溢出时增加高度(当我们输入大量文本时)。但是当将位置改为绝对时，插入符号将再次从左上角开始。

.canvas {

background-color: #fff;

box-shadow: 0 4px 14px -4px #919191;

border: 1px solid #e0e0e0;

height: 200px;

width: 400px;

margin: 20px;

padding-left: 20px;

padding-top: 20px;

padding-bottom: 20px;

padding-right: 20px;

word-wrap:break-word;

vertical-align: bottom;

display: table-cell;

word-wrap:break-word;

overflow: scroll;

vertical-align: bottom;

display: table-cell;

position:relative;

}

text should start bottom left

我目前使用的关键css元素是：

vertical-align: bottom;

display: table-cell;

word-wrap:break-word;

position:relative;