JQueryUI 窗口未覆盖所有内容元素

Question

我有一个工作任务，我必须为 Intranet 实现一个简单的基于浏览器的聊天系统。后端已准备就绪，现在我正在尝试创建 UI 部分，但这让我很头疼，因此我的头撞在桌子上好几个小时:(

这是我的 JSFiddle：http://jsfiddle.net/2PMvM/（它使用 JQuery + JQueryUI - 1.x）

从语义上讲，HTML 看起来不错，但效果不如看起来那么好。这个想法是窗口（红色边框 div）应该包含它的所有元素。我不知道为什么列表的水平滚动条然后我的 textarea 会跳出窗口，好像有一些我没有考虑到的偏移量？

我正在尝试用最少的 JS 来做这件事，但是如果 CSS 方式太复杂，我愿意采取 JS 解决方案。

有什么问题呢？在此先感谢:)

--- 所以需要我把代码放在这里：

注意：请务必包含此 JS：https://github.com/AndrewDryga/jQuery.Textarea.Autoresize/raw/master/js/jquery.textarea.autoresize.js，因为它是必需的，因此我的 textarea 在获得更多文本时会自动调整大小。即使调整大小，窗口也应该包含文本区域。似乎 CSS 可以做到，但没有？

解决了！！感谢@Trevor： 这是更新后的代码 + Fiddle HERE。谢谢！

HTML：

<div class="window">    
<div style="height: 20px;" class="wndHandle">Some username :D</div>
<div class="content" id="chatDiv" style="background:#fff;overflow: scroll;">
    <ul class="ulChat">
        <li class="msg in">Test message for testing 1</li>
        <li class="msg out">Test message for testing 2</li>
        <li class="msg out">Test message for testing 3</li>
        <li class="msg in">Test message for testing 4</li>
    </ul>
</div>
<div class="footer">
    <textarea style="width: 100%; resize: none; overflow-x: hidden;" rows="1" cols="1"></textarea>
</div>
</div>

CSS：

.ui-resizable-handle 
{
    background: #f5dc58; border: 1px solid #FFF;
    width: 9px; height: 9px;
    z-index: 2;
}
.ui-resizable-se { right: -5px; bottom: -5px; }

.window
{
    position: absolute; 
    display: inline-block;
    width: 150px;   
    height: 200px;
    border: 1px solid #bb0000;   
}

.wndHandle {
    cursor: move;
    font-size: 9pt;
    background: #888;
    color: #fff;
    padding-left: 1px;
}

Javascript：

var refresh = function() {
    var objWindow = $('.window');
    var objHandle = objWindow.find('.wndHandle');
    var objContent = objWindow.find('.content');
    var objFooter = objWindow.find('.footer');
    var objResize = objWindow.find(".ui-resizable-handle.ui-resizable-se");
    objResize.removeClass("ui-resizable-autohide");
    objContent.height(
        objWindow.innerHeight() -
        objHandle.outerHeight() -
        (
            (objFooter.length == 0) ?
            (objResize.length == 0) ? 0 : objResize.outerHeight()
            : objFooter.outerHeight()
        )
    );
}

$('.window').draggable({ handle: '.wndHandle' }).resizable({
    handles: 'se',
    minWidth: 150,
    minHeight: 100,
    resize: function( event, ui ) {
        refresh();
    }
});

$('textarea').autoresize({
    maxHeight: 80,
    onResize: function () {
        refresh();
    }    
});

refresh();

Answer 1

这里有一个使用jQuery调整高度的解决方案

HTML - 添加 ID

...
<div id="chatDiv" style="background:#fff;overflow: scroll;">
...

jQuery

$('.window').draggable({ handle: '.wndHandle' }).resizable({
    handles: 'se',
    minWidth: 150,
    minHeight: 100,
    resize: function( event, ui ) {
        $('#chatDiv').height($('.window').height()-38);          
    }
});
$('#chatDiv').height($('.window').height()-38);
$('textarea').autoresize();

Fiddle