javascript - contenteditable div 高度变化在设计内部工作

Question

希望这有点容易理解。我有一个未知高度的元素列表，下面有一个内容可编辑的 div。我需要弄清楚当内容可编辑的 div 随着内容变大时如何调整列表的大小。有没有我在某处遗漏的 CSS 技巧？我需要听一个事件吗？这里最好的解决方案是什么？

这是一个fiddle展示我在说什么。

这是 fiddle 中的 html 结构，只是因为它让我用 fiddle 发布代码。

<div class="containerDiv" ng-controller="MyController">
    <ul>
        <li ng-repeat="item in items">
            <p>{{item.message}}</p>
        </li>
    </ul>
    <div id="inputDiv" contenteditable></div>
    <button ng-click="addItem()">Add</button>
</div>

例如，查看 facebook 聊天窗口。当您在发送消息之前有多行文本时，它如何调整大小？有更简单的方法吗？

Answer 1

首先，您需要将您的列表封装在一个 div 中，并让该 div 由 CSS 动态处理。

然后您需要修改您的高度属性并设置为“自动”。

接下来，如果需要，请提供最小高度。

containerDiv {
    border:1px solid blue;
    height:auto;
    width:150px;
    min-height:100px;
}
.containerDiv ul {
    height:auto;
    overflow-y:auto;
}

更新的 JS fiddle :http://jsfiddle.net/q78jN/1/