在内部设计中可编辑的div高度变化

Question

Hopefully this is somewhat simple to figure out. I have a list of items of an unknown height and a content editable div underneath it. I need to figure out how to resize the list when the content editable div gets bigger with content. Is there a css trick that I missed somewhere? Do I need to listen for an event? What's the best solution here?

Here is a fiddle to show what I'm talking about.

here's html structure in the fiddle just cause it makes me post code with a 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>

For example look at the facebook chat window. How does it resize when you have multiple lines of text before you send the message? Is there a simpler way of doing it?

Answer 1

First, you need to encapsulate your list in a div and let that div be dynamically handled by CSS.

You would then need to modify your height property and make the same 'auto'.

Next, provide a min-height if you require.

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

Updated JS Fiddle: http://jsfiddle.net/q78jN/1/