Question

希望这一点有点简单。我有一个未知高度的项目列表和一个内容可编辑的div。当内容可编辑div随内容变大时，我需要弄清楚如何调整列表大小。有没有我错过的css技巧？我需要听一个活动吗？什么是最好的解决方案？

以下是fiddle来展示我正在谈论的内容。

这里的小提琴中的html结构只是因为它让我用小提琴发布代码。

<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中，然后让CSS动态处理。

然后，您需要修改自己的身高属性，然后进行相同的自动＆＃39;。

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

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

更新了JS小提琴：http://jsfiddle.net/q78jN/1/

满意的div高度变化工作内部设计

1 个答案: